Vue入门学习（一）

一、简介

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。它专注于MVVM模型的ViewModel层，通过双向数据绑定把View层和Model层链接起来。

二、Vue常用的插件

1. vue-cli（vue官方命令行工具）
快速构建vue的脚手架工具，用于快速搭建大型单页应用。
启用项目的命令行： npm run dev

2. vue-router
Vue非常适合单页面（SPA）应用开发，而单页面应用的核心是路由和模板。Vue核心库本身提供模板机制（mushtache），路由支持则由第三方库vue-router提供（Vue-router 2.0- 中文文档）。链接为https://router.vuejs.org/zh-cn/
这充分体现出Vue的“增量式开发设计”：Vue.js只提供核心功能，其他辅助功能由第三方库支持。
3. 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) => {…});

4. Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vue父子组件是单向通信的，由父组件向子组件传递数据。如果子组件要改变父组件状态，或者组件间有通信，那么，需要采用事件emit。但是，一旦组件数量庞大起来，通信更加复杂，那么，事件监听模式就显得散乱，无秩序，无法统一管理。这时，需要Vuex集中存储组件状态，并更新组件。

5. UI库
支持Vue2.0的UI库很多，可以去网上搜搜。笔者推荐两个：

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

6. 调试工具
Vue有基于chrome插件的调试工具：https://github.com/vuejs/vue-devtools
注意：一定要在vue项目中开启debugger模式，才能激活该调试工具：

Vue.config.devtools = true;