windows下安装配置vue开发环境，并使用vue-cli脚手架搭建一个基于 webpack 模板的vue项目（创建-打包-构建解释）
写在前面：
本人后端dog，项目开发可能要涉及前端vue，遂学。下面主要从两个部分，基于实际开发需求，以前端小白的心态做一些学习和实践的记录和总结：
- 第一部分，详细描述Windows 下vue开发环境的安装配置
- 第二部分，超详细且浅显讲如何使用vue-cli脚手架搭建一个基于 webpack 模板的vue工程
一、鸟瞰Vue开发的环境需求
vue.js所有的环境基础包括：
- Node.js ：这是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时，(运行时：可以理解为运行环境)
- npm：这是node.js的包管理工具
- webpack：前端资源模块化管理和打包工具
- vue-cli：脚手架构建工具
- cnpm：npm的淘宝镜像
二、安装配置vue的开发环境
如果不确定自己之前是否安装过上面这些东西，可以先确认一下，例如下面我想确认一下我是否已经装了node.js:
- 菜单栏-->输入cmd-->找到
-->右键管理员方式打开 - 输入 node -v ,回车：
如果像上面这样显示出版本号，则代表已经装过了，在版本满足你需求的情况下就无须再装了。如果没有装过，会提示你"xx不存在"类似的指令。
1、安装node.js
到node.js官网下载你所需要的版本，双击下载后的安装包，按照提示一路点"下一步"（和安装普通软件一样）即可。
安装完以后，检查一下PATH环境变量 是否已经自动配置了node.js。
点击开始=》运行=》输入"cmd" => 输入命令"path"(下面是我cmd查出来后放记事本格式化后展示出来的样子):
可以看到PATH环境已经安装成功。
现在我们再来cmd查一下node.js版本：
没毛病。
2、npm
npm是随同Node.js一起安装的包管理工具,直接在命令行敲出npm -v就可以查看是否安装成功：
3、安装淘宝的国内镜像
因为npm包管理器需要依赖包的服务器地址是国外的，资源下载及访问会很慢，所以我们需要安装淘宝的国内镜像来提高速度。
安装淘宝的国内镜像的指令：
npm install -g cnpm --registry=http://registry.npm.taobao.org
cmd信息如下：
以后安装其他依赖，你就可以使用这个命令了：
cnpm install [依赖的name]4、安装webpack
安装指令：
cnpm install webpack -gcmd信息如下：
提示安装成功
5、安装vue 脚手架
第一次使用npm指令安装失败
第二次使用cnpm指令：
cnpm install --global vue-cli
成功
三、使用vue-cli构建一个基于 webpack 模板的vue项目并启动
不同于创建一个java后端工程，创建一个vue工程，需要在命令行编写指令一步步完成（嗯，，反正我目前只会这种方式，，）。你可以使用电脑自带的cmd命令行窗口，也可以装一个vscode（两个工具指令和步骤都一样）。使用它的终端窗口，长下面这样：
1、初始化一个vue工程。
1.1 先cd到你想要的目录下，我放到了我的aigovProject文件夹下：
1.2 初始化vue环境：
1.3 提出vue的初始化指令解释一下：
vue init webpack name(项目名)这个指令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。
1.4 在安装过程会有一些初始化的设置提示，如下是我的操作及解释：
- Project name ：你可以在这填写和修改初始的项目名称，注意我上面图片上的注意事项哈
- Project description ： 项目的自我介绍，你可以写：这是全球最np的Vue项目
- Author ：项目作者，你的小名-狗子
- Vue build (Use arrow keys)
Vue build standalone 这两个选它推荐的那个，好像是运行加编译的意思 - Install vue-router? (Y/n) ： 是否安装Vue路由，这是Vue的核心必须要，后面专门写一下这个路由。
- Use ESLint to lint your code? (Y/n) ：使用 ESLint 到你的代码？这是个代码风格管理工具，选一下。
- Pick an ESLint preset (Use arrow keys) ：选择一个预置ESLint，这个就是接在上面那个问题下的，意思让你选一个代码风格。
- Setup unit tests with Karma + Mocha? (Y/n) ：是否安装单元测试
- Setup e2e tests with Nightwatch? (Y/n) ：是否安装e2e测试
- Should we run `npm install` for you after the project has been created?：这个是问你，要不要项目创建后，自动为你执行 npm install命令，你不选的话，项目创建后，你需要进入[项目文件夹]手动执行npm install。（我这里选了自动install,之前我用cmd创建项目好像没问我这个，，）
注：
npm install 指令是为项目安装模块，在install 后面输入模块的名字可以安装指定模块，比如：安装路由模块vue-router和网络请求模块vue-resource：
npm install vue-router vue-resource --save如果不指定模块，直接执行npm install，就会按照根目录下的package.json文件中依赖的模块安装，这里我用npm install 安装所有的模块。安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。
1.5、上面所有配置完成后，没有ERRO报错的话，是这样的：
2、启动项目
2.1 依次次执行下面命令启动vue项目：
cd vueDemo //记得先进入你的项目文件夹
npm run dev2.2 运行成功是这样的：
2.3、浏览器输入上面地址：
3、 在VSCode中查看项目架构及一些配置文件解释
3.1 项目结构解释
自己的新增项目文件都需要放到下面的 src 文件夹下 。
3.2 超详细的vue-cli webpack配置分析（转）
4、Vue项目打包上线
开发完成，输入以下指令打包Vue项目，打包完成后，会在本地指定文件目录生成 dist 文件，随后将其丢到服务器上即可。
npm run build注1：可能会遇到的错误和解决办法：
- 创建Vue项目报错“npm ERR! code EPERM npm ERR! errno -4048”
- 'eslint' 不是内部或外部命令，'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
注2：一些指令的使用：
- npm run dev 启动项目后，使用 ctrl+c 可退出或关闭Vue程序
- --save-dev指令 可自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
- --save 安装包信息将加入到dependencies（生产阶段的依赖）
- --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它