本文章主要介紹 @vue/cli 使用路由router,狀態(tài)機(jī)vuex,sass, elementUi餓了么組件 的安裝以及使用時(shí)注意事項(xiàng)

• 安裝

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

• 相應(yīng)的代碼文件修改：

1.main.js中render頁(yè)面時(shí)使用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>

小總結(jié)：

1.當(dāng)然如果不想將第一層的router-view寫(xiě)在A(yíng)pp.vue文件里面的話(huà)，也可以寫(xiě)在別的文件里面。

2.根路徑 '/' 直接指向的是main.js中render的組件(頁(yè)面)。

3.vue-router實(shí)例中的routes屬性，配置的都是children, 包括第一層數(shù)組也是children，屬性名是routes。所以對(duì)于第一層的router-view可以有多個(gè)頁(yè)面，就是通過(guò)第一層數(shù)組中的不同的path+component來(lái)配置

4.vue-router實(shí)例中的routes屬性中的children中的每個(gè)對(duì)象，都可以再擁有自己的children。

github repo link: https://github.com/mxlgsq/vue3-demo.git

（正文已結(jié)束）

推薦閱讀：a2100

免責(zé)聲明及提醒：此文內(nèi)容為本網(wǎng)所轉(zhuǎn)載企業(yè)宣傳資訊，該相關(guān)信息僅為宣傳及傳遞更多信息之目的，不代表本網(wǎng)站觀(guān)點(diǎn)，文章真實(shí)性請(qǐng)瀏覽者慎重核實(shí)！任何投資加盟均有風(fēng)險(xiǎn)，提醒廣大民眾投資需謹(jǐn)慎！