一、安装、创建配置、运行、打包
全局安装 npm i vue-cli -g
新建文件夹中命令行输入 vue init webpack xxxx(xxxx为项目名称)
之后填写一系列描述等（省略），生成的目录结构如下：
cd xxxx(xxxx为项目名称)切换到当前项目
npm run dev 在localhost:8080 热加载项目
npm run build 进行打包压缩
二、打包问题
打包后生成dist文件夹
1.去掉css 和js 的map文件（体积过大）
map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
在build文件夹下的webpack.prod.conf.js文件中找到 devtool 和 cssProcessorOptions 都设置为 false，如下图
2.打包后执行dist文件夹中的index.html按F12发现全是css和js路径报错
找到config文件夹中的index.js文件找到 build 下的 assetsPublicPath 设置为 "./ " (原本为"/")
三、按路由进行按需加载
在路由页面引入，如下图所示：
打包后的js：
四、关闭vue-cli eslint格式检测：
（格式很烦，引号只能用单引号或者双引号，末尾加了多余的分号等都要提醒，警告看着很恼火所以去掉提醒）
创建一个vue项目的时候，会有一个选择：Use ESLint to lint your code? (Y/n)，在这一步，我们选择no，或者找到build\webpack.base.conf.js去掉下图代码。
五、打包后，字体路径出错：
找到build文件下的utils.js在如下图所示处加上这行代码publicPath: '../../',
六、路由中@的含义：
@是webpack配置的引用路径，resolve里面有一个alias的配置项目，能够让开发者指定一些模块的引用路径。对一些经常要被import或者require的库,我们最好可以直接指定它们的位置，这样方便我们查找。
