Vue是一套自底向上的渐进式框架，用于构建用户界面。
渐进式框架：使用简单；项目中可以部分使用VueJS；如果使用AngelaJS全部前端代码要更换；
Vue.js的使用：
1、在html页面使用script引入vue.js的库即可使用。
2、使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。
3、大型应用推荐此方案。
使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。
特点：
1、声明式渲染：使用vue.js的插值表达式放在Dom的任意地方， 差值表达式的值将被渲染在Dom中；
2、条件与循环：使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环；
3、双向数据绑定： 提供v-model 指令，它可以轻松实现Dom元素和数据变量之间双向绑定；
比如：
给这个input框赋值，获取id为a的DOM对象，然后操作value属性赋值：getElementById.value=’’
使用Vue时：使用v-model:value="name"为DOM对象赋值，如果当用户在数据框里面输入了值，则由DOM对象把数据绑定到了name变量
4、处理用户输入：用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法；
5、组件化应用构建：可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用；

MVVM模式：
Model:负责数据存储
View:负责页面展示
View Model:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示，Vue在其中就是起到了这个角色。
代码编写步骤：
1、编写html，引入vue.js
2、编写视图部分app div
3、编写vue实例VM
4、编写实例部分中的data属性作为Model
5、刷新页面运行程序，VM实现将model中的数据在View部分展示
接口响应到数据先到Model，然后经过View Model经过业务逻辑处理，然后交给View展示到页面。
1、v-model：
v-model仅能在如下元素中使用：

input
select
textarea
components（Vue中的组件）

VM要访问data中的属性需要使用到this关键字；
当把引入Vue的Script标签从head放到body后面时候会出现闪烁问题，这时需要将插值表达式里面的内容放到v-text属性来解决。
v-bind：只能将数据对象绑定到dom对象中，例如src和href，也可以给dom对象绑定一个或多个特性，例如动态绑定style和class；
v-bind:src可以简写为:src
v-on:click可以简写为@click
v-for：

• {{index}}--{{item}
• 遍历list集合，item为遍历项，index为下标，取偶数行数据；
• {{key}}--{{value}}
• 遍历user对象里面的字段和value值；
• {{index}}--{{item.user.uname}
• 遍历的对象是存放实体类的list集合webpack的优缺点：
  优点：
  1、模块化开发：将jss、css打包成一个个小文件，减少了http的请求次数；
  2、编译高级js语法：将打包文件转换成浏览器可识别的js语法；
  缺点：
  1、配置有些繁琐
  2、文档不丰富
  Nodejs是JS的运行环境，npm是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理；
  node.js已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本；
  1、下载对应你系统的Node.js版本：
  ​​​ https://nodejs.org/en/download/​​​2、选安装目录进行安装
  默认即可
  安装完成检查PATH环境变量是否设置了node.js的路径。
  
  查看node版本：

node ‐v

查看npm版本：

npm -v

查询NPM包管理路径：

npm config ls

为了方便对依赖包管理，我 们将管理包的路径设置在单独的地方，在nodejs主目录下创建npm_modules和npm_cache文件夹。
设置modules路径：

npm config set prefix "D:\Soft\nodejs\npm_modules"

设置cache路径：

npm config set cache "D:\Soft\nodejs\npm_cache"

然后再调用​​npm config ls​​​命令查看包管理路径是否设置成功。
使用淘宝镜像安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm版本：

cnpm -v

全局安装nrm：

cnpm install -g nrm

查看镜像指向：

nrm ls

切换镜像：

nrm use taobao

全局安装就将webpack：

npm install webpack -g

查看webpack版本：

webpack -v

使用webpack的打包命令：

webpack main.js build.js

将main.js及他所引用的其他文件打包成build.js文件，在html文件中引入​​<script src="build.js"></script>​​即可引入所有功能。

使用webpack-dev-server服务器实现热部署：
webpack-dev-server开发服务器：它的功能可以实现热加载并且自动刷新浏览器；
使用 webpack-dev-server需要安装webpack、 webpack-dev-server和 html-webpack-plugin三个包。
1、安装webpack-dev-server，在需要热部署的项目主目录下运行如下指令：

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev -g

安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。
2、配置webpack-dev-server
在package.json中配置script：

"scripts": {
  "dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
},

–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址
–devDependencies：开发人员在开发过程中所需要的依赖。
–scripts：可执行的命令

启动：
1、进入 webpacktest02目录，执行​​​npm run dev​​​ 2、使用webstorm，右键package.json文件，选择“Show npm Scripts”，双击dev
发现启动成功自动打开浏览器。
修改src和html文件中的任意内容，自动加载并刷新浏览器。

debug调试：
使用了webpack之后就不能采用传统js的调试方法在chrome中打断点。
1、在webpack.config.js配置文件中添加

devtool: 'eval-source-map',//用于调试

然后在需要调试的js地方添加：​​debugger​​​ 例如：

其中碰到的问题：

说明cnpm命令没有配置环境变量，需要在path中追加以下内容：

D:\Soft\nodejs\npm_modules;

该路径下有cnpm：


说明webpack-cli需要全局安装：​​​npm install webpack-cli -g​​

该文件找不到，有两种解决方法：
第一种如果本机中node没装多少插件的话，卸载原来的node清理所有node主目录下的文件，然后重装即可
第二种方式是将npm_modules文件夹下对应的文件复制过来即可