Vue.js是一套构建用户界面的UI框架，它专注于MVVM模型的ViewModel层，通过双向数据绑定把View层和Model层链接起来。
vue专注viewModel.png
它有如下特点：
- 渐进式框架，采用自底向上增量开发设计
- 模板双向绑定机制
- 利用指令（directive）对DOM进行封装
-
组件化设计思想
如下图，将UI页面分割为若干组件进行组合和嵌套。
组件化.png
围绕Vue.js框架，涉及到的常用技术/插件有：
1. vue-cli
快速构建vue项目的脚手架工具，使用方式如下：
安装并构建项目
1. npm install -g vue-cli
2. 选择简单模板搭建vue项目：vue init webpack-simple my-webpack-simple-demo
3. 选择webpack（略复杂）模板搭建vue项目: vue init webpack my-webpack-demo
建立好项目之后，如下启动：
1. npm install
2. npm run dev
3. 打开游览器访问localhost:8080
如果在发布环境，需要生成build文件，运行命令npm run build。
2. npm, webpack, babel, es6
Vue开发中，会用到很多依赖包，传统方式是用<script>标签引入，但是，在大型项目中更推荐使用npm安装。npm能够很好得和webpack等模块打包器配合使用。同时，vue提供单文件组件开发模式，这样，更需要webpack的配合，对.vue文件进行解析编译。
Vue中推荐使用ES6语法，这就需要编码器Babel的协助，而webpack对Babel支持良好，因此，webpack的重要性不言而喻，围绕着它，可以支持众多功能。
3. vue-router
Vue非常适合单页面（SPA）应用开发，而单页面应用的核心是路由和模板。Vue核心库本身提供模板机制（mushtache），路由支持则由第三方库vue-router提供（Vue-router 2.0- 中文文档）。
这充分体现出Vue的“增量式开发设计”：Vue.js只提供核心功能，其他辅助功能由第三方库支持。
4. axios
Vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐axios。axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
由于axios并不是针对vue框架开发的，因此，如果将其使用在vue框架中，建议如下配置：
import Vue from 'vue';
import axios from 'axios';
...
Vue.prototype.$http = axios;
使用：
this.$http.post(url, data).then((response) => {...});
5. Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vue父子组件是单向通信的，由父组件向子组件传递数据。如果子组件要改变父组件状态，或者组件间有通信，那么，需要采用事件emit。但是，一旦组件数量庞大起来，通信更加复杂，那么，事件监听模式就显得散乱，无秩序，无法统一管理。这时，需要Vuex集中存储组件状态，并更新组件。
6. UI库
支持Vue2.0的UI库很多，可以去网上搜搜。笔者推荐两个：
7. 调试工具
Vue有基于chrome插件的调试工具：https://github.com/vuejs/vue-devtools
注意：一定要在vue项目中开启debugger模式，才能激活该调试工具：
Vue.config.devtools = true;
vue-devtool.jpg
小结
注意，Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性Object.defineProperty()。
如何配置Vue项目，可以参考文章《详解基于Vue2.0项目的webpack配置文件》。
微信公众号：
网友评论