vue(16)：webpack（2）：vue-cli

文章参考（第一次学） Vue2全家桶之一：vue-cli（vue脚手架）超详细教程

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK
主要是webpack要安装各种包，还要设置相关设置，太复杂对于我这样的小白太难了

安装vue-cli
(1)先安装webpack，开始之前，请确保安装了 Node.js 的最新版本

npm i webpack -g    //全局安装
npm i webpack -s    //局部安装，推荐
npm install --save-dev [e-mail]<version>    //安装其它版本
npm install --save-dev webpack-cli      //安装 CLI

注：如果你使用 webpack 4+ 版本，你还需要安装 CLI。
(2)安装vue-cli

npm i vue-cli -g

安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

用vue-cli来构建项目
（1）新建一个文件夹作为项目存放地，然后使用命令行cd进入到文件夹输入一下命令

vue init webpack 项目名

然后基本一路回车或者y就完了

注：use EsLint to lint your code一定要选n，不然到写代码的时候，虽然说是浏览器完全能运行结果，但是在cmd就是一直报错，严重影响了我敲代码的心情
如果你跟我一样手贱不小心点了y，那接下来看这里传送门


（2）安装完成后cd进入项目文件夹安装依赖

npm install 

npm install是安装所有的模块，如果是安装具体的哪个个模块，在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装（这个文件里面是不允许有任何注释的），每个使用npm管理的项目都有这个文件，是npm操作的入口文件

项目目录结构：

（3）启动项目

npm run dev

结果：

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js。
如果本地调试项目时，建议将build 里的assetsPublicPath的路径前缀修改为 ’ ./ '（开始是 ’ / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ’ / ’ 开头，在本地是无法找到对应文件的（服务器上没问题）

(3)打包上线
在项目开发完成之后，可以输入 npm run build 来进行打包工作

注意，自己的项目文件都需要放到 src 文件夹下。
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。
项目上线时，只需要将 dist 文件夹放到服务器就行了。