前期了解
1、npm
Node.js下的包管理器，安装Node.js 后，会自动安装上
2、webpack
它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包
3、vue-cli 脚手架构建工具
用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
NPM安装
1、从官网上下载下载Node.js：https://nodejs.org/en/
2、安装，选择安装目录，然后一路点击next ，安装完成
打开CMD
改变NPM本地仓库文件路径
Node.js 安装成功后，会自动在AppData\Roaming 生成缓存目录(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们把这个目录移到 D:\nodejs下面来，并创建node_global（用来存放NPM全局安装的包）
先如下图建立2个目录
然后运行以下2条命令
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global
配置镜像站
因为有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像
输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站
然后等待，没报错表示安装成功
输入命令npm config list 显示所有配置信息，我们关注一个配置文件
C:\Users\Administrator\.npmrc
使用文本编辑器编辑它，可以看到刚才的配置信息
检查一下镜像站行不行命令1
npm config get registry
检查一下镜像站行不行命令2
Npm info vue 看看能否获得vue的信息
更新NPM
注意，此时，默认的模块D:\nodejs\node_modules 目录
将会改变为D:\nodejs\node_global\node_modules 目录，
如果直接运行npm install等命令会报错的。
我们需要做1件事情：
1、增加环境变量NODE_PATH 内容是：D:\nodejs\node_global\node_modules
（注意，一下操作需要重新打开CMD让上面的环境变量生效）
测试NPM安装vue.js
命令：npm install vue -g
这里的-g是指安装到global全局目录去
测试NPM安装vue-router
命令：npm install vue-router -g
测试NPM安装 vue-cli vue脚手架
运行npm install vue-cli -g安装vue脚手架
编辑环境编辑path
对path环境变量添加D:\nodejs\node_global
win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】
重新打开CMD，并且测试vue是否使用正常
注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，
他的配置并不全放在根目录下的 webpack.config.js 中。
用脚手架生成第一个vue项目
进入D盘，直接在根目录生成第一个vue项目
1、输入 vue init webpack vue01
说明：
Project name (vuetest)
项目名称，可以自己指定，也可直接回车，按照括号中默认名字。
Project description (A Vue.js project)
项目描述，也可直接点击回车，使用默认名字。
Author
作者，可以自己指定，也可直接回车。
接下来会让用户选择
Runtime + Compiler: recommended for most users
运行加编译，既然已经说了推荐，就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅运行时，已经有推荐了就选择第一个了
Install vue-router? (Y/n)
是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n)
用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行。
Setup unit tests with Karma + Mocha? (Y/n)
是否安装单元测试。
Setup e2e tests with Nightwatch(Y/n)?
是否安装e2e测试
初始化，安装依赖
2、运行 npm install 安装依赖
3、运行 npm run dev 运行项目
成功界面，提示打开地址http://localhost:8080
自动打开浏览器http://localhost:8080/#/
4、运行 npm run build 生成静态文件
打开dist文件夹下新生成的index.html文件
nmp下新建出来的vue01的目录描述：
目录文件介绍：
bulid
里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件。
config
配置文件，执行文件需要的配置信息。
src
资源文件，所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。
assets
资源文件夹，放图片之类的资源，
components
组件文件夹，写的所有组件都放在这个文件夹下，
router
路由文件夹，这个决定了页面的跳转规则，
App.vue
应用组件，所有自己写的组件，都是在这个组件之上运行了。
main.js
webpack入口文件。
---------------------