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

前言

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

一、获取网易云API

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

1. 安装 node 环境

在获取网易云API之前我们必须先搭建好 Node 环境，有关 Node.js 的介绍和 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基本使用

2. 删除默认文件

在Vue-Cli创建的项目会默认生成很多文件，但是与我们的项目无关，譬如favicon.ico、logo.png、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.png">
<link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon114.png">
<link rel="apple-touch-icon" sizes="152x152" href="./apple-touch-icon152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon180.png">
<!--网页快捷图标-->
<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>

注意：

npm install --save-dev html-loader

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(html)$/,
          exclude: /node_modules/,
          use: {
            loader: 'html-loader',
            options: {
              minimize: true
            }
          }
        }
      ]
    }
  }
}

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

npm i -D postcss-pxtorem

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 100, // 根元素字体大小
      propList: ['*']
    }
  }
}

font-size： 15px; --> font-size： 15Px；

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

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

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

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

npm install fastclick

import fastclick from 'fastclick'

fastclick.attach(document.body)

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

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. 纳入版本控制

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