1. 程式人生 > 其它 >利用nodejs的require.context來實現不用寫impor匯入元件

利用nodejs的require.context來實現不用寫impor匯入元件

先給你們看下目錄結構

stuendt和teacharts還有util是同級

主要是componentRegister.js檔案

function changStr(str) {
  return str.charAt(0).toUpperCase() + str.slice(1) // charAt() 方法可返回指定位置的字元。請注意,JavaScript 並沒有一種有別於字串型別的字元資料型別,所以返回的字元是長度為 1 的字串。
}
export default {
  install(Vue) {
    const requireAll = require.context(
      
'../components/teachers/components', false, /\.vue$/ )
  //
keys()是得到檔名稱是個陣列
    requireAll.keys().forEach(item => {
      Vue.component(
        changStr(item.replace(/\.\//, '').replace(/\.vue$/, '')),
        requireAll(item).default
      )
    })

    const requireAlla = require.context(
      
'../components/student/components', false, /\.vue$/ ) requireAlla.keys().forEach(item => { Vue.component( changStr(item.replace(/\.\//, '').replace(/\.vue$/, '')), requireAlla(item).default ) }) } }

require.context遍歷當前目錄下的components/teachers/components資料夾的所有.js結尾的檔案,不遍歷子目錄第一個引數是讀取檔案的路徑第二個引數是否遍歷檔案的子目錄第三個引數匹配檔案的正則執行後返回的是一個函式並且這個函式有三個屬性1,resolve{function}接受一個引數request,request為api資料夾下面匹配檔案的相對路勁,返回這個匹配檔案相對於整個工程的相對路徑2,keys{function}返回匹配成功模組的名字組成的陣列3,id{string}執行環境的id返回的是一個字串,感覺id就是返回這個檔案整體的路徑 resolve方法返回了一個字串代表著傳入引數的檔案相對於整個工程的相對路徑

最後在main.js檔案註冊一下這個檔案就行了






只要是在student下面的components檔案就可以在student外面隨便用 用的話就是檔名稱<檔名稱> 有個小小的bug就是檔名稱不能用-連線 就是起名不能是這樣“aaaa-bbb.vue”你用的時候<aaaaBbbb>或者<aaaabbb>就會報錯name找不到

專案越多你就可以定製的越多隻要在componentRegister.js檔案裡面加上就行了 所以在這裡teacharts資料夾下面的檔案也不用寫import來引入元件了