当前位置：首页> 正文

01-Vue项目实战-网易云音乐-准备工作

01-Vue项目实战-网易云音乐-准备工作

前言

在接下来的一段时间，我会仿照网易云音乐，利用Vue开发一个移动端的网易云音乐项目。在做这个项目之前，需要做一些准备工作。

一、获取网易云API

因为这个项目是基于网易云音乐的，数据都是从网易云获取的，所以我们有必要先拿到网易云API

1. 安装 node 环境

在获取网易云API之前我们必须先搭建好 Node 环境，有关 Node.js 的介绍和 Node 环境搭建请移步到这两篇文章。

  • 01-NodeJS核心基础-Node简介
  • 02-NodeJS核心基础-Node环境搭建

2. 将网易云API下载到本地

进入到网易云API的 GitHub 界面，直接将整个项目下载到本地并解压。

3. 在解压后的文件目录中输入cmd，进入终端窗口。

4. 在cmd中输入 npm install 指令下载相关依赖

5. 在cmd中输入 npm app.js 指令部署服务器

当你看到 server running 就代表整个服务器已经部署好了

6. 在浏览器地址栏输入 localhost:3000

或者输入 127.0.0.1:3000
能进入这个界面就说明我们将网易云服务器部署到本地了，我们已经可以拿到网易云API了

二、初始配置

1. 创建Vue项目

借助Vue-Cli来创建，更详细的Vue-Cli创建Vue项目流程请移步到： 15-Vue-CLI4基本使用

  • 在命令行中输入指令 vue create music

  • 选择手动方式创建

  • 选择相关配置项
  • 是否需要使用router--选择是(y)
  • 选择哪一种CSS预处理器--选择第一个
  • 选择哪一种代码规范--选择第三种(标准规范)
  • 选择什么时候进行代码规则检测--两种都选
  • 选择如何存放配置--选择第一个(放到单独的文件中)
  • 是否保存当前配置--选择否(n)
  • 敲回车后等待项目创建，显示如下内容就表示项目创建成功了

2. 删除默认文件

在Vue-Cli创建的项目会默认生成很多文件，但是与我们的项目无关，譬如favicon.ico、logo.webp、HellodWorld.vue...
我们可以把这些文件删掉

然后我们在把router文件夹下的index.js文件的多余代码删掉
删除后的文件长这样

同理，把App.vue中的多余代码也删掉，删除后是这样的：
把public目录下的html文件的多余代码也删掉

3. 初始化HTML中的代码

index.html

<!--可以让部分国产浏览器默认采用高速模式渲染页面--><meta name="renderer" content="webkit"><!--为了让 IE 浏览器运行最新的渲染模式下--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--SEO三大标签--><title>网易云音乐</title><meta name="keywords" content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com"><meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。"><!--apple-touch-icon: 是苹果私有的属性作用: 指定将网页保存到主屏幕上的时候的图标--><link rel="apple-touch-icon"  href="./apple-touch-icon.webp"><link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon114.webp"><link rel="apple-touch-icon" sizes="152x152" href="./apple-touch-icon152.webp"><link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon180.webp"><!--网页快捷图标--><link rel="icon" href="./favicon.ico">

还需要将上面代码用到的图标放到public目录中

4. 利用rem+视口缩放的方式来适配移动端

<head>    ...    <script>      let scale = 1.0 / window.devicePixelRatio;      let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;      document.write(text);      document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";      document.documentElement.setAttribute('data-dpr', window.devicePixelRatio + '');    </script></head>

注意：

  • 如果在HTML文件中用到了字符串模板, 字符串模板中用到了变量, 那么html-plugin是无法处理的, 所以会报错
  • 如果想解决这个问题, 那么我们需要再借助一个loader, html-loader
  • 安装 html-loader
npm install --save-dev html-loader
  • 配置 html-loader
    在项目目录(music)下新建一个vue.config.js文件
module.exports = {  configureWebpack: {    module: {      rules: [        {          test: /\.(html)$/,          exclude: /node_modules/,          use: {            loader: 'html-loader',            options: {              minimize: true            }          }        }      ]    }  }}

5. 借助postcss-pxtorem实现自动将px转换成rem

  • 安装 postcss-pxtorem
npm i -D postcss-pxtorem
  • 配置 postcss-pxtorem
    在项目目录下新建一个 postcss.config.js 文件
module.exports = {  plugins: {    autoprefixer: {},    'postcss-pxtorem': {      rootValue: 100, // 根元素字体大小      propList: ['*']    }  }}
  • 排除不需要转换为rem的样式
    小技巧：只需要将样式的px改为大写的Px即可 例如：
font-size： 15px; --> font-size： 15Px；

6. 借助webpack实现CSS3/ES678语法的兼容

CSS3/ES678语法的兼容在Vue-cli创建项目的时候已经帮我们实现了
如果需要指定兼容哪些浏览器，可以在项目目录下的 .browserslistrc 文件中配置
例如：我需要兼容 IE8及以上版本，火狐3.5及以上版本...

ie >= 8Firefox >= 3.5chrome  >= 35opera >= 11.5

7. 借助fastclick解决移动端100~300ms的点击事件延迟问题

  • 安装 fastclick
npm install fastclick
  • 初始化 fastclickmain.js
import fastclick from 'fastclick'fastclick.attach(document.body)

8. 初始化默认的全局样式

  • 在assets目录新建一个css目录
  • 将准备好的文件放到css目录中
  • 在main.js中导入base.scss
import './assets/css/base.scss'

注意：
在移动端开发中, 一般情况下我们不需要让字体大小随着屏幕尺寸的变化而变化
由于我们是通过视口缩放来适配移动端的, 所以我们不能直接设置字体大小, 否则字体大小就会随着屏幕尺寸的变化而变化
如何解决？
根据像素比设置字体大小
比如：屏幕放大两倍，那么就让字体大小就放大两倍
mixin.scss

@mixin font_dpr($font-size){  font-size: $font-size;  [data-dpr="2"] & { font-size: $font-size * 2;}  [data-dpr="3"] & { font-size: $font-size * 3;}}

9. 纳入版本控制

  • 在工具栏中找到VCS并选中里面的 Enable Version Control
  • 在弹出的窗口中选择 Git
  • 选择右上角的提交按钮

  • 选择全部提交
    描述信息：初始化项目

  • 创建Develop分支
    点击右下角的 Git：master选择New Branch

  • 创建编写业务代码的分支
    暂时先创建home分支编写首页相关代码

学前端跟江哥不迷路：@ 知播渔教育

展开全文阅读
项目网易云音乐网易云项目实战

内容头条

相关内容