最近仿寫一個專案,如下目錄,base內部都是一些基礎的元件,但是並沒有在main.js 中使用常規的方式去全域性註冊的,剛開始還不明白沒有註冊的元件怎麼在全域性使用的

專案目錄

//main.js
import global from './utils/global'
Vue.use(global)
//解釋:如果自動化的程式碼直接寫在一個js檔案中直接全域性的引入main.js 中也是沒有問題的,//但是這裡是按照自定義外掛的方式寫下global檔案中的就要使用vue的use方法

自定義global外掛,通過全域性的Vue.use(global)來呼叫

//global.js
import {
 Input,Dialog,} from "element-ui"
import VueLazyload from "vue-lazyload"
import Meta from 'vue-meta'
import * as utils from "./index"

export default {
 install(Vue) {
 const requireComponent = require.context(
  "@/base",true,/[a-z0-9]+\.(jsx?|vue)$/i,)
 //console.log(requireComponent);
 //console.log(requireComponent.keys(),)
 //console.log(requireComponent.resolve,)
 //console.log(requireComponent.id,)
 //console.log(requireComponent.resolve("./tabs.vue"))
 //console.log(requireComponent("./tabs.vue"));
 //console.log(requireComponent("./tabs.vue") === require("@/base/tabs"));

 
 // 批量註冊base元件
 requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = componentConfig.default.name
  if (componentName) {
   Vue.component(componentName,componentConfig.default ||   
    componentConfig)
  }
 })
 
 Vue.prototype.$ELEMENT = { size: "small" }
 Vue.prototype.$utils = utils

 Vue.use(Input)
 Vue.use(Dialog)
 Vue.use(Meta)
 },}

解析 require.context

const requireComponent = require.context(
  "@/base",)

require.context返回一個webpack的上下文環境,返回的是一個函式,

有三個引數:

• 要搜尋的資料夾目錄,(不可以是變數,webpack在編譯階段無法定位目錄)
• 是否還要再搜尋他的子目錄
• 匹配檔案的正則表示式

require.context(directory,useSubdirectories,regExp);

總結:

• require.context模組返回一個函式,這個函式可以接受一個引數,
• require.context 的第一個引數不可以是變數,webpack在編譯階段無法定位到目錄
• 有三個屬性和方法,resolve,keys,id
  • resolve 是一個函式,傳入檔案的路徑得到解析後的模組的id
  • keys 是一個函式,返回所有檔案路徑組成的陣列
  • id 是上下文環境中包含的模組的id,可能在使用module.hot.accept (熱模組更新)時使用

看下面兩幅圖片解析的更清晰

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。