基礎元件的自動化全域性註冊

require.context是webpack的api，主要用來實現自動化匯入模組，在前端工程中，如果遇到從乙個資料夾引入很多模組的情況,可以使用這個api,它會遍歷資料夾中的指定檔案,然後自動匯入,使得不需要每次顯式的呼叫import匯入模組

//例如在main.js中全域性註冊多個元件

// 基礎元件的自動化全域性註冊
import upperfirst from
"lodash/upperfirst"
;import camelcase from
"lodash/camelcase"
;const requirecomponent = require.
context
(// 其元件目錄的相對路徑
"./components"
,// 是否查詢其子目錄
false
,// 匹配基礎元件檔名的正規表示式
/\.vue$/);
console.
log(requirecomponent.
keys()
);//["./helloworld.vue", "./button1.vue", "./filed.vue"]
requirecomponent.
keys()
.foreach
(filename =>
);

="box"

>
="con"
>這是乙個單獨的頁面<
/div>
<
/button1>
<
/filed>
<
/div>

Vue基礎元件自動化全域性註冊

vue中有很多基礎的元件可以自動化註冊使用 在src components下面建立 basecomponents basevue.vue the vue build version to load with the import command runtime only or standalone ...

元件的自動化全域性註冊

官方位址 在使用vue構建專案的過程中，我們會設定一些通用的元件，他可能只包含了乙個按鈕或者其他的乙個小功能，但是會被我們在不同的元件頁面頻繁呼叫。此時若是每乙個元件頁面都進行引用，將會有很多重複冗雜的 可以改為全域性註冊。具體如下 將這些通用基礎元件放置在同乙個資料夾下 如 components ...

vue 基礎元件的自動化全域性註冊

參考官網 下的 基礎元件的自動化全域性註冊 在日常開發中，有一些元件是比較常用，但是為了避免在開發過程中不停地引入，或者在main.js中註冊，或者每新增乙個元件就需要手動註冊一次。則直接進行自動化全域性註冊。自動化全域性註冊，官網上都詳細的說明，以下是自己官網的說明基礎上進行了乙個demo開發例項...