@vue/cli 使用路由router,状态机vuex,sass, elementUi饿了么组件
本文章主要介绍 @vue/cli 使用路由router,状态机vuex,sass, elementUi饿了么组件 的安装以及使用时注意事项
1.npm install vue-router
2.npm install vuex --save
3.npm install -D sass-loader node-sass
4.npm i element-ui -S
vue add element
1.main.js中render页面时使用router属性
文件路径: src/router/index.js
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', redirect: 'index' }, { path: '/index', name: 'index', redirect: 'homepage' }, { path: '/homepage', name: 'homepage', component: () => import('@/pages/Main'), children: [ {path: '', component: () => import('@/components/content/middle/components/Test1')} ] } ]})
2.src/main.js
import Vue from 'vue'import vuex from 'vuex'import App from './App.vue'import './plugins/element.js'import router from './router'Vue.use(vuex)Vue.config.productionTip = falsenew Vue({ render: h => h(App), router}).$mount('#app')
3.src/App.vue中配置顶层的router-view
<template> <div id="root"> <!-- <img alt="Vue logo" src="./assets/logo.png"> --> <router-view/> </div></template>
小总结:
1.当然如果不想将第一层的router-view写在App.vue文件里面的话,也可以写在别的文件里面。
2.根路径 '/' 直接指向的是main.js中render的组件(页面)。
3.vue-router实例中的routes属性,配置的都是children, 包括第一层数组也是children,属性名是routes。所以对于第一层的router-view可以有多个页面,就是通过第一层数组中的不同的path+component来配置
4.vue-router实例中的routes属性中的children中的每个对象,都可以再拥有自己的children。
github repo link: https://github.com/mxlgsq/vue3-demo.git
推荐阅读:苹果7p和8