亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue-router優(yōu)化import引入過多導致index文件臃腫問題

 更新時間：2023年08月21日 09:01:30   作者：koi_li  
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

需求

當我們在開發(fā)過程中，需要引入很多的文件，但是又不想每個文件都依次導入的時候 就會想有沒有一個方法可以批量導入 require.context方法就可以解決這個問題.(僅限于webpack）

function importAll (require) {
  console.log(require.keys(),'keys')  // 此處是由多個文件路徑組成的數(shù)組
  require.keys().forEach(item=>{
    routerAll.push(require(item).default)
  })
  console.log(routerAll,'routerALL')  // 將文件的 export default 暴露出去
}
importAll(require.context('./',true,/\.js/))let routerAll = []；
function importAll (require) {
  console.log(require.keys(),'keys')  // 此處是由多個文件路徑組成的數(shù)組
  require.keys().forEach(item=>{
    routerAll.push(require(item).default)
  })
  console.log(routerAll,'routerALL')
}
importAll(require.context('./',true,/\.js/))

代碼詳解

require.context

require.context(deirectory,useSubdirectories,regExp)

1.directory:要查找的文件路徑(String)

2.userSubdirectories:是否查找子目錄（Boolean)

3.regExp:要匹配文件的正則

require.context.keys()

const ctx = require.context('./components/', true, /\.js$/)
console.log(ctx.keys())
// ["./A.js", "./B.js", "./C.js", "./D.js"]

require.context.keys()返回一個數(shù)組，數(shù)組每個元素傳入 require.context方法中，就可以到處相應(yīng)的文件

借鑒了Store 的自動化引入

當然此方法也可以應(yīng)用到別的文件

在 main.js 中引入大量公共組件

import Vue from 'vue'
// 自定義組件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印結(jié)果
// 遍歷出每個組件的路徑
requireComponents.keys().forEach(fileName => {
  // 組件實例
  const reqCom = requireComponents(fileName)
  // 截取路徑作為組件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 組件掛載
  Vue.component(reqComName, reqCom.default || reqCom)
})

今天的分享就到這里 希望能對你有所幫助。

以上就是Vue-router優(yōu)化import引入過多導致index文件臃腫問題的詳細內(nèi)容，更多關(guān)于Vue-routert引入導致index臃腫的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • Vue3 源碼導讀(推薦)

    Vue3 源碼導讀(推薦)

    這篇文章主要介紹了Vue3 源碼導讀(推薦)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • 淺析Vue.js中$emit和$on的用法和區(qū)別

    淺析Vue.js中$emit和$on的用法和區(qū)別

    在?Vue.js?中，$emit和$on方法是兩個常用的方法，用于實現(xiàn)組件間的通信，雖然它們的名字很相似，但它們的作用和用法有所不同，本文將介紹$emit和$on方法的區(qū)別，并通過代碼示例來說明它們的用法,感興趣的朋友可以參考下
    2023-07-07
  • Vue+FormData+axios實現(xiàn)圖片上傳功能

    Vue+FormData+axios實現(xiàn)圖片上傳功能

    這篇文章主要為大家學習介紹了Vue如何利用FormData和axios實現(xiàn)圖片上傳功能，本文為大家整理了詳細步驟，感興趣的小伙伴可以了解一下
    2023-08-08
  • 一文帶你了解Vue中單文件組件的使用

    一文帶你了解Vue中單文件組件的使用

    在web開發(fā)中,組件化開發(fā)已成為一種趨勢,Vue提供了一種高效的方式來創(chuàng)建和管理這些組件—單文件組件,下面我們就來看看它的具體應(yīng)用吧
    2024-03-03
  • vue3+ts使用APlayer的示例代碼

    vue3+ts使用APlayer的示例代碼

    這篇文章主要介紹了vue3+ts使用APlayer的示例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • Vue實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法

    Vue實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法

    今天小編就為大家分享一篇Vue實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

    • 最新評論