第2章 项目准备工作

内容均为《Vue2.0开发企业级移动端音乐Web App 》学习笔记

包括项目需求分析、脚手架初始化代码、项目目录介绍及图标字体、公共样式等资源的准备 。

1、公共资源准备

stylus文件夹

fonts文件夹

image公用图片

2、脚手架初始化代码

vue init webpack vue-music
复制代码

• 是否需要路由 y
• 是否使用eslint y
• 是否用单元测试 n
• 是否用e2e测试 n

cd vue-music
cnpm install
cnpm run dev
复制代码

3、建立项目文件，使得项目结构更加清晰

4、修改eslint的配置规则 （.eslintrc文件）

使用beauty美化代码之后，一般地，代码会符合eslint的校验要求。但是，禁止函数圆括号之前有一个空格(space-before-function-paren)和文件末尾保留一行空行(eol-last)这两个规则 ，在beauty中没有对应的匹配规则。如果，这两个要求不是非要遵守，可以在.eslintrc文件中，将其设置为0

'eol-last': 0,
'space-before-function-paren': 0
复制代码

这样，在编写代码时，不用考虑代码格式。保存时，自动被美化，且符合eslint的校验要求

扩展

1. 用vscode的话，可以在vscode安装eslint插件

2. 齿轮图标-设置-输入autoFixOnSave-打上勾

这样可以在每次保存的自动格式化，但是默认只支持 javascript .js 文件

3. 齿轮图标-设置-输入validate -打上勾给需要自动格式化的文件，默认是全勾选的

这样一旦保存的话，就可以将自己的代码自动格式化为符合eslint规则的代码哦

5、安装插件

babel-runtime和babel-polyfill 插件可以让一些低版本浏览器对es6的支持

cnpm install --save babel-runtime
cnpm install --save-dev babel-polyfill
cnpm install --save fastclick
复制代码

• babel-polyfill Babel 默认只转换新的 JavaScript 语法，而不转换新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。 如果想使用这些新的对象和方法，则需要为当前环境提供一个polyfill
• babel-runtime babel-runtime 是为了减少重复代码而生的。 babel-polyfill解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。 （比如：上述的帮助函数_defineProperty有可能在很多的代码模块文件中都会被插入） Babel为了解决这个问题，提供了单独的包babel-runtime用以提供编译模块的 工具 函数， 启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数 （请参考: babel-runtime和babel-polyfill的作用介绍和使用 ）
• fastclick 解决移动端300ms延迟

6、在vue-cli脚手架使用插件

import 'babel-polyfill'// 引入babel-polyfill
 import fastclick from 'fastclick'// 引入fastclick
 fastclick.attach(document.body)// 使用fastclick
复制代码

7、安装stylus stylus-loader

cnpm install stylus stylus-loader  --save-dev
复制代码

8、文件路径配置

当我们引入common下的文件时，我们平时可能这样写

import './common/stylus/index.styl'
复制代码

现在我们可以在webpack.base.conf.js，看resolve这个函数 __dirname为当前目录build，..（往上找）到dir对应的目录。

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
复制代码

在webpack.base.conf.js 配置

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common': resolve('src/common'),
      'components': resolve('src/components'),
      'base': resolve('src/base'),
      'api': resolve('src/api'),
    }
    },
复制代码

这样我们就可以直接这样写了

import 'common/stylus/index.styl'
复制代码