Vue入门系列（一）Vue技术栈

Vue.js是一套构建用户界面的UI框架，它专注于MVVM模型的ViewModel层，通过双向数据绑定把View层和Model层链接起来。

vue专注viewModel.png

它有如下特点：

1. 渐进式框架，采用自底向上增量开发设计
2. 模板双向绑定机制
3. 利用指令（directive）对DOM进行封装
4. 组件化设计思想 如下图，将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库很多，可以去网上搜搜。笔者推荐两个：

• element-ui：http://element.eleme.io/#/zh-CN/component/installation
• iview：https://www.iviewui.com/

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配置文件》。