Vue全家桶都包括些什么？

大家好，欢迎来到IT知识分享网。

Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

vue-router路由

推荐使用npm工具来安装vue-router
npm install vue-router
通过import导入并定义Vue模块、vue-router模块和需要使用的组件，在本例中，分别是Goods、Ratings和Seller组件。最后，如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能。
import Vue from’vue’
importRouter from’vue-router’

import Goods from ‘@/components/goods/goods’;
import Ratings from ‘@/components/ratings/ratings’;
import Seller from ‘@/components/seller/seller’;

Vue.use(Router); // 需要import Vue和Router，不然会报错undefined
通过const router= new VueRouter（）来定义一个路由，并传入对应的配置，包括路径path和组件components。

vuex状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。如前面所提到的，Vuex 已经集成到 Vue 的官方调试工具vue Devtools，可以轻松的查看项目中的Vuex状态变化情况。
假设有这样一个场景：我们的项目规模比较大，有多个父组件，每个父组件同时又包含多个子组件。如何保持对所有时间的追踪将变得很困难。到底哪个事件是哪个组件派发的，哪个组件该监听哪个事件？父组件将变得和子组件耦合越来越严重，因为它需要明确的派发和监听子组件的某些事件。项目逻辑分散在各个组件当中，很容易导致逻辑的混乱，不利于我们项目的维护。
这就是 Vuex 用来解决的问题。 Vuex 的四个核心概念分别是：
The state tree：Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
Getters：用来从 store 获取 Vue 组件数据。
Mutators：事件处理器用来驱动状态的变化。
Actions：可以给组件使用的函数，以此用来驱动事件处理器 mutations

Vuex和简单的全局对象是不同的，当Vuex从store中读取状态值的时候，若状态发生了变化，那么相应的组件也会高效的更新。并且，改变store中状态的唯一途径就是提交commit mutations。这样便于我们跟踪每一次状态的变化。只要发生了状态的变化，一定伴随着mutation的提交。

vue-resource

Vue-resource有体积小，支持IE9以上的浏览器，支持promise特性的特点。同样推荐使用npm来安装Vue-resource。
$ npm install vue-resource
在安装并引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。