第一个Vue-cli应用
之前练习了Vue一些基础的命令标签，在学习中在遇到一些基础知识我会继续向里面进行补充。
链接在这里：Vue原理与基础语法事件标签总结
但是大多数开发都是采用的vuecli来进行，这样能能够实现组件化开发，提高开发效率和成本，首先就是安装vuecli。
什么是vue-cli?
vue-cli 官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架。
vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included。
vue-cli主要功能:
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
这里比较优秀的就是热部署，就和SpringBoot项目一样，能够自动的进行编译运行，不用开发者手动去点击，超爽！
搭建需要的环境
在这里我们要安装Node.js和git,node.js安装比较简单，直接去官网 http://nodejs.cn/download 下载安装，此处不再赘述。
git安装教程在这里哈：Git和SVN的区别并在Windows电脑安装Git
其实我并不推荐这样的直接下载安装，还是要先安装nvm然后再安装node.js,推荐这种安装吧，还不了解nvm、node.js、npm的关系，那先了解一下，点这里：nvm、node、npm之间的关系和区别
ok,接下来就是安装nvm了，首先我们用nvm来安装node,这里有教程，大家可以参考一下.
1、nvm-windows下载
下载地址:
https://github.com/coreybutler/nvm-windows/releases
下载nvm-setup.zip
2、安装nvm
首先把nvm-setup.zip解压到比如E:/dev/nvm 中(其它盘也可以)；然后以管理员的身份运行nvm-setup . 选择nvm安装目录为E:\dev\nvm，node安装目录为 E:\dev\nodejs,修改settings.txt的内容为：
root: E:\dev\nvm path: E:\dev\nodejs arch: 64 proxy: none node_mirror: http://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/
3、修改nvm环境变量
我的电脑->属性->高级系统设置->环境变量，在用户变量中添加环境变量
NVM_HOME:E:\dev\nvm NVM_SYMLINK:E:\dev\nodejs PATH:%NVM_HOME%;%NVM_SYMLINK%（path已存【%NVM_HOME%;%NVM_SYMLINK%】在添加到最后）
4、通过nvm安装node
nvm -v // 查看nvm版本 nvm install 8.12.0 // 下载指定版本 nvm install latest安装最新版本 nvm use 8.12.0 // 使用指定版本 nvm ls // 查看已经安装的nodejs版本 node -v // 查看nodejs版本
5、安装全局npm
安装node的时候，npm其实也已经一起安装了。因为nvm可以管理多个版本的node，如果每次添加一个node版本都要安装一堆的包很麻烦,如果有一个npm可以让各个版本的node共用，就不会这么麻烦了，这就是为什么我们要配置一个全局的npm的原因。简单的三步就可以配置一个全局的npm
1. npm config set prefix "E:\dev\nvm\npm"//配置用npm下载包时全局安装的包路径 2. npm install npm -g --registry=https://registry.npm.taobao.org //安装全局npm,不同的node都使用这个npm，想更新全局的npm的话首先删除全局路径(就是上一行命令的地址,可以使用npm config ls查看)下的npm,再执行一次这个命令即可 3. 在用户变量中添加 NPM_HOME=E:\dev\nvm\npm，path中添加%NPM-HOME%
6、一些替代npm的方式
npm install -g cnpm --registry=https://registry.npm.taobao.org //使用淘宝镜像cnmp替代npm npm install -g yarn//使用yarn替代npm npm config get prefix//查看npm路径
注意： 这是我的npm的版本和node.js的版本，因为我是之前装的，不是采用nvm，所以没有nvm的版本查看，但是一定推荐大家用nvm来进行安装，否则当你卸载node.js之后就很麻烦，可能卸载不干净，用nvm来操作可以实现多个版本的控制和使用，灵活高效。
安装vue-cli
接下来就是安装Vuecli脚手架了，代码如下：
cnpm install vue-cli -g
这里采用的是cnpm，就是国内的，速度比较快。
安装完成后 vue list 来查看vue安装情况：
第一个脚手项目配置
开始创建第一个vue项目，这里项目名称为myvue 运行下面的命令：
# 这里的 myvue 是项目名称，可以根据自己的需求起名 vue init webpack myvue
** 说明：**
Project name：项目名称，默认 回车 即可
Project description：项目描述，默认 回车 即可
Author：项目作者，默认 回车 即可
Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）
Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
Should we run npm install for you after the project has been created：创建完成后直接初始化，选择 n，我们手动执行
命令行运行Vue项目
初始化并运行 cd myvue npm install npm run dev
接下来我们运行命令行上面提示的地址：http://localhost:8080 如下：
运行成功。
IDEA运行Vue项目
我们可以把我们的项目拷贝出来，用IDEA打开，有WebStrom的可以用WebStorm，由于我是一个后端开发人员，所以还是先用IDEA，都是一样的。找到我们的项目：
C:\Users\Administrator\myvue 用IDEA打开，目录如下：
一定要记得下载Vue.js这个插件，这样才能够将我们的项目运行起来。
安装完成后点击run->EditConfigurations->点击添加选择npm
我们点击运行
出现如下界面就是成功了。运行localhost:8080测试一下：
当我们修改Vue内容的时候不用再次部署运行，就可以直接进行展示，比如在这里我将主页的名称改成别的
未改前：
修改HelloWorld.vue下的export default中的msg属性：
export default { name: 'HelloWorld', data () { return { //msg: 'Welcome to Your Vue.js App' msg: 'My name is zhangxianxian' } } }
修改后效果如下：
说明：
build 和 config： WebPack 配置文件
node_modules： 用于存放 npm install 安装的依赖文件
src： 项目源码目录
static： 静态资源文件
.babelrc： Babel 配置文件，主要作用是将 ES6 转换为 ES5
.editorconfig： 编辑器配置
eslintignore： 需要忽略的语法检查配置文件
.gitignore： git 忽略的配置文件
.postcssrc.js： css 相关配置文件，其中内部的 module.exports： 是 NodeJS 模块化语法
index.html： 首页，仅作为模板页，实际开发时不使用
package.json： 项目的配置文件
name： 项目名称
version： 项目版本
description： 项目描述
author： 项目作者
scripts： 封装常用命令
dependencies： 生产环境依赖
devDependencies： 开发环境依赖
其实Vue涉及到很多的新的语法，深度学习的话还要学习一下ES6才行，不断进步，慢慢来。
