第2章 项目准备工做

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

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

一、公共资源准备

stylus文件夹

文件名称	描述
variable.styl	样式变量文件（如颜色定义规范，文字大小规范）
reset.styl	重置默认样式文件
base.styl	基本样式（body，html，在此可能会引用variable.styl 来使用它的变量）
icon.styl	字体图标
index.styl	主体样式（引入reset.styl、base.styl 、icon.styl ）

fonts文件夹

文件名称	描述
music-icon.ttf	字体文件

image公用图片

二、脚手架初始化代码

vue init webpack vue-music
复制代码

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

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

三、创建项目文件，使得项目结构更加清晰

src文件目录	描述
api	数据交互
common	公共的字体图片样式脚本文件 （font 放字体 、image 图片、js 插件、stylus 样式）
components	组件文件
router	路由文件
store	vuex集中管理状态

四、修改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规则的代码哦

五、安装插件

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延迟

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

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

七、安装stylus stylus-loader

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

八、文件路径配置

当咱们引入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'
复制代码