Vue生态圈(全家桶)

vue全家桶及项目架构

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。

最后，在使用newVue来创建和挂载vue根实例的时候，记得要通过 router配置参数注入路由，即在router中export出来的路由对象，从而让整个应用都有路由功能。