vue2.0基础项目构建

初始化项目

1. 确认node, vue-cli版本

2. vue create 项目名称

新增基础文件

1. 环境配置文件：.env, .env.fat, .env.dev, .env.prod

2. 项目配置文件：vue.config.js

3. 文件目录：views（页面）, router（路由）,

新增路由

1. 下载依赖：npm install --save vue-router

2. 添加router文件下index.js

3. 按照规范code路由内容

引入less

1. npm i less less-loader --save

2. 可能出现‘Syntax Error: TypeError: this.getOptions is not a function’报错,可能是less-loader版本过高导致的

卸载styuls-loader后执行npm install less-loader@3.0.2 -S

3. 引入基础style @import 'assets/css/reset.less'

vue.config.js配置

1. > 参考[vue-cli] https://cli.vuejs.org/zh/config/#devserver [webpack] https://webpack.js.org/configuration/dev-server/

2. 需要添加postcss-px2rem插件(npm install postcss-px2rem --save-dev)

3. 添加项目检查npm i webpack-bundle-analyzer --save-dev

添加对应命令"report": "vue-cli-service build --report"

vue.config.js中添加对应配置

process.argv.includes('--report') && config

.plugin('webpack-bundle-analyzer')

.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

4. 添加大文件拆分优化

config.optimization.minimize(true)

splitChunks拆分文件，[配置内容] https://webpack.js.org/plugins/split-chunks-plugin/

config.optimization.splitChunks({})

env参数在index.html中使用需要添加NODE_ENV变量，否则会报错

1. 多行百分比样式写法

2. css高等于宽写法