美文网首页
Vue生态圈(全家桶)

Vue生态圈(全家桶)

作者: CouCo丶哟 | 来源:发表于2017-10-30 14:13 被阅读0次

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

相关文章

  • Vue生态圈(全家桶)

    vue全家桶及项目架构 Vue有著名的全家桶系列,包含了vue-router(http://router.vuej...

  • 2019-03-25

    vue 全家桶 Vue有著名的全家桶系列,包含了: vue-router,vuex,vue-re...

  • 前端面试2021.4.9

    面试题正文: 1.vue全家桶包含哪些? 答案:vue全家桶与react全家桶介绍 2.v-model是什么?怎么...

  • 前端面试2021.4.9

    面试题正文: 1.vue全家桶包含哪些? 答案:vue全家桶与react全家桶介绍 2.v-model是什么?怎么...

  • vue + typescript

    Vue全家桶+TypeScript使用总结

  • vue全家桶

    vue-cli + vue2.0 + vuex + vue-route + axios + element-ui ...

  • VUE全家桶

    注意:这里只讲VUE脚手架搭建的项目首先安装开发环境,vue-cli 一键搭建vue项目是基于 Node.js 所...

  • Vue全家桶

    食材: vue-cli,vuex babel-preset-es201X, node-sass,sass-load...

  • Vue全家桶

    生态系统 UI 组件库 图表

  • vue全家桶

    一、NodeJS改变了前端开发 - 利用webpack实现模块化开发 NodeJS诞生于2009年,作者是Ryan...

网友评论

      本文标题:Vue生态圈(全家桶)

      本文链接:https://www.haomeiwen.com/subject/vhvppxtx.html