第2章 项目准备工作
包括项目需求分析、脚手架初始化代码、项目目录介绍及图标字体、公共样式等资源的准备 。
1、公共资源准备
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公用图片
2、脚手架初始化代码
vue init webpack vue-music
- 是否需要路由 y
- 是否使用eslint y
- 是否用单元测试 n
- 是否用e2e测试 n
cd vue-music
cnpm install
cnpm run dev
3、建立项目文件，使得项目结构更加清晰
| src文件目录 | 描述 |
|---|---|
| api | 数据交互 |
| common | 公共的字体图片样式脚本文件 （font 放字体 、image 图片、js 插件、stylus 样式） |
| components | 组件文件 |
| router | 路由文件 |
| store | vuex集中管理状态 |
4、修改eslint的配置规则 （.eslintrc文件）
使用beauty美化代码之后，一般地，代码会符合eslint的校验要求。但是，禁止函数圆括号之前有一个空格(space-before-function-paren)和文件末尾保留一行空行(eol-last)这两个规则 ，在beauty中没有对应的匹配规则。如果，这两个要求不是非要遵守，可以在.eslintrc文件中，将其设置为0
'eol-last': 0,
'space-before-function-paren': 0
这样，在编写代码时，不用考虑代码格式。保存时，自动被美化，且符合eslint的校验要求
扩展
-
用vscode的话，可以在vscode安装eslint插件
-
齿轮图标-设置-输入autoFixOnSave-打上勾
这样可以在每次保存的自动格式化，但是默认只支持 javascript .js 文件 -
齿轮图标-设置-输入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'