Vue生态圈(全家桶)

2017-10-30  本文已影响0人  CouCo丶哟

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出来的路由对象,从而让整个应用都有路由功能。

上一篇下一篇

猜你喜欢

热点阅读