Vue項(xiàng)目代碼之路由拆分、Vuex模塊拆分、element按需加載詳解

更新時(shí)間：2022年11月02日 10:03:45 作者：Echoyya

這篇文章主要介紹了Vue項(xiàng)目代碼之路由拆分、Vuex模塊拆分、element按需加載,項(xiàng)目較大路由較多時(shí)，路由拆分是一個(gè)不錯(cuò)的代碼優(yōu)化方案，按不同業(yè)務(wù)分為多個(gè)模塊，結(jié)構(gòu)清晰便于統(tǒng)一管理，本文通過(guò)示例給大家詳細(xì)講解，需要的朋友可以參考下

路由的拆分

項(xiàng)目較大路由較多時(shí)，路由拆分是一個(gè)不錯(cuò)的代碼優(yōu)化方案，按不同業(yè)務(wù)分為多個(gè)模塊，結(jié)構(gòu)清晰便于統(tǒng)一管理。

require.context() 是webpack提供的語(yǔ)法，相當(dāng)于前端的讀寫文件，返回的 files是一個(gè)函數(shù)，files.keys()執(zhí)行，返回獲取到的文件名(是一個(gè)數(shù)組)，再通過(guò)files(keys)獲取到模塊，取到default 屬性，拿到真正的導(dǎo)出對(duì)象。

/router/home.router.js首頁(yè)路由配置

export default [
   {
    path: '/',
    component: () => import(/*webpackChunkName:'home'*/'@/views/Home/index.vue') // 會(huì)默認(rèn)代碼分割
  }, {
    path: '*',
    component:() => import(/*webpackChunkName:'404'*/'@/views/404.vue')
}]

/router/manager.router.js管理類路由配置

export default [
    {
    path: '/manager',
    component: () => import(/*webpackChunkName:'home'*/'@/views/Manager/index.vue') // 會(huì)默認(rèn)代碼分割
}]

/router/index.js路由入口文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
// 每個(gè)模塊有自己的路由配置

// 獲取當(dāng)前對(duì)應(yīng)文件夾下的 所有以router.js 結(jié)尾的文件
// files是一個(gè)函數(shù) , false 不去遍歷子目錄 | /\.router.js$/ 結(jié)尾的文件
const files = require.context('./routers',false,/\.router.js$/);
const routes = [];
files.keys().forEach(key=>{
  // 獲取到文件的內(nèi)容 拿到默認(rèn)的導(dǎo)出結(jié)果 放到routes里 ， 如果遇到* 號(hào) 路由會(huì)將* 放到最后面
  routes.push(...files(key).default)
});

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
export default router

VUEX模塊拆分

同樣將狀態(tài)管理也按照模塊進(jìn)行劃分管理，創(chuàng)建一個(gè)根模塊rootModule文件，統(tǒng)一管理，實(shí)際上跟模塊中可以存放一些公共的數(shù)據(jù)，并通過(guò)require.context讀取其他狀態(tài)管理模塊，遍歷添加至根模塊的module屬性上，module[moduleName] = store，moduleName文件名處理路徑和后綴后的字符串，默認(rèn)以該字符串作為命名空間。

./modules/user.js：此處暫以空內(nèi)容，作為案例分享，實(shí)際項(xiàng)目中會(huì)存在一些用戶模塊特有邏輯嗎，例如存儲(chǔ)用戶數(shù)據(jù)，判斷用戶菜單權(quán)限等。

store/rootModule.js：根實(shí)例也暫以空內(nèi)容為例，實(shí)際項(xiàng)目中可以編寫一些公共的業(yè)務(wù)邏輯進(jìn)行管理，例如用戶的登錄狀態(tài)維護(hù)，及token檢驗(yàn)等。

export default {
    state: {},
    mutations: {},
    actions: {},
}

store/index.js：狀態(tài)管理入口文件

import Vue from 'vue'
import Vuex from 'vuex'
import rootModule from './rootModule'
Vue.use(Vuex)

// 模塊劃分 require.context 讀取文件目錄
const files = require.context('./modules', false, /\.js$/);
// 自動(dòng)根據(jù)當(dāng)前store中的模塊名解析vuex中的狀態(tài)
files.keys().forEach(key => {  // [./article.js,  ./user.js]
    let moduleName = key.replace(/\.\//, '').replace(/\.js/, ''); // 文件名處理路徑和后綴后的字符串，默認(rèn)以文件名作為命名空間
    let store = files(key).default; // .default  真正的導(dǎo)出對(duì)象
    let module = rootModule.modules = (rootModule.modules || {});
    module[moduleName] = store;
    module[moduleName].namespaced = true; // 設(shè)置命名空間, 不加空間沒有作用域
});

export default new Vuex.Store(rootModule)

Element UI庫(kù)按需加載的優(yōu)雅寫法

Element UI算是目前比較常見的UI組件庫(kù)了，有非常多的組件，但是如果全部引入的話，對(duì)項(xiàng)目打包也并不是很友好，因此大多推薦組件的按需加載，在使用use語(yǔ)法，但是寫的多的確實(shí)不怎么好看。所以可以參考第二種寫法，封裝一個(gè)對(duì)象循環(huán)調(diào)用。代碼看起來(lái)會(huì)更加優(yōu)雅。

import Vue from 'vue';
import { Button, Header, Footer, Main, Container, Row, Col, Form, FormItem, Input, Carousel, CarouselItem } from 'element-ui';

Vue.use(Button);
Vue.use(Header);
Vue.use(Footer);
Vue.use(Main);
Vue.use(Container);
...
...

import Vue from 'vue';
import { Button, Header, Footer, Main, Container, Row, Col, Form, FormItem, Input, Carousel, CarouselItem } from 'element-ui';

const components = {Button, Header, Footer, Main, Container, Row, Col, Form, FormItem, Input, Carousel, CarouselItem};

Object.values(components).forEach(component => {
    Vue.use(component)
})

到此這篇關(guān)于Vue項(xiàng)目代碼之路由拆分、Vuex模塊拆分、element按需加載的文章就介紹到這了,更多相關(guān)vue路由拆分內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: