【备忘】：使用vue-cli快速创建一个vue项目

=====================================
一、准备工作：安装nodejs及npm包管理器

1.https://nodejs.org/en/ 下载Node.js并安装到D:\nodejs
2.CMD->echo %PATH% 查看环境变量是否添加node.js
node -v 检查版本
3.D:\nodejs下建立2个目录node_cache、node_global
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”
npm list -global 查看目录信息
4.安装npm本地仓库，配置淘宝镜像站提升速度
npm config set registry=http://registry.npm.taobao.org
npm config list 查看配置信息
npm config get registry 检查镜像站是否回应
5.npm info vue 获取vue信息
6.npm install npm -g npm包管理器安装或更新,-g代表放在全局目录node_global下
7.npm -v 检查npm版本
8.npm list -global 再次查看global里有哪些模块
此时，默认的模块D:\nodejs\node_modules 目录将会改变为D:\nodejs\node_global\node_modules 目录，如果直接运行npm install等命令会报错，需要下面配置环境变量这一步
9.增加环境变量D:\nodejs\node_global\node_modules到NODE_PATH，重启CMD

=====================================
二、开始安装vue相关组件

1.CMD->npm install vue -g 安装vue组件
检查安装结果，在D:\nodejs\node_global\node_modules\vue下应有如下内容(D代表文件夹，F代表文件)：
D->dist dist是distribution的缩写，理解成最终发布产品，也就是我们需要的东西
D->src
D->types
F->LICENSE
F->package.json
F->README.md
2.npm install vue-router -g 安装vue-router组件
检查安装结果，在D:\nodejs\node_global\node_modules\vue-router下应有如下内容(D代表文件夹，F代表文件)：
D->dist
D->types
F->LICENSE
F->package.json
F->README.md
3.npm install vue-cli -g 安装vue脚手架
检查安装结果，在D:\nodejs\node_global\node_modules\vue-cli目录下应有如下内容(D代表文件夹，F代表文件)：
D->bin
D->docs
D->lib
D->node_modules
D->test
F->.editorconfig
F->.eslintrc
F->appveyor.yml
F->circle.yml
F->CONTRIBUTING.md
F->issue_template.md
F->LICENSE
F->package.json
F->README.md
若安装完毕后输入vue提示找不到命令，则执行下面这个操作：
编辑环境变量Path，加入D:\nodejs\node_global
重启CMD，输入vue -V查看vue脚手架版本，注意-V大写
说明：vue-cli工具内置模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，它的配置并不全放在 webpack.config.js 中。

=====================================
三、使用vue-cli脚手架生成项目

1.启动CMD，进入想要创建项目的文件路径，比如D:\Workspaces\Project
2.vue init webpack vueCase 初始化项目vueCase
Project name case1
Project description learn vue
Author xxx
Vue build standalone
Install vue-router? Yes
Use ESLint to lint your code? No
Set up unit tests No
Setup e2e tests with Nightwatch? No
Should we run npm install for you after the project has been created? Yes
vue-cli * Generated “vueCase”
3.cd vueCase 进入目录
npm install 安装项目依赖
npm run dev 启动项目(提示 Your application is running here: http://localhost:8080)
4.打开地址http://localhost:8080
5.npm run build 生成静态文件dist目录(如下说明：)

=====================================
vueCase目录说明：
|–build // 构建脚本的目录(webpack项目构建相关代码)
| |–build.js // 生产环境构建代码
| |–check-version.js // 检查node,npm等版本
| |–utils.js // 构建工具相关
| |–vue-loader.conf.js // webpack loader配置
| |–webpack.base.conf.js // webpack基础配置
| |–webpack.dev.conf.js // webpack开发环境配置，构建开发本地环境
| |–webpack.prod.conf.js // webpack生产环境配置
|–config // 项目环境配置目录
| |–dev.env.js // 开发环境变量
| |–index.js // 项目的一些配置变量
| |–prod.env.js // 生产环境变量
|–dist // 编译生成的结果文件
|–node_modules // 依赖的包目录
|–src // 源码目录
| |–assets // 资源目录
| |–components // vue公共组件目录
| |–router // vue的路由管理
| |–App.vue // 页面入口文件，页面级组件
| |–main.js // 程序入口文件，加载各种公共组件
|–static // 静态文件,比如一些图片，json数据
|–.babelrc // ES6语法编译配置
|–.editorconfig // 定义代码格式
|–.gitignore // git上传需要忽略的文件格式
|–.postcsssrc // postcss配置文件
|–README.md // 项目说明
|–index.html // 入口页面
|–package.json // 项目基本信息描述文件，包依赖信息等
|–package-lock.json // 锁定安装时的包的版本号