vue 實(shí)現(xiàn)基礎(chǔ)組件的自動化全局注冊
參考官網(wǎng)：https://cn.vuejs.org/v2/guide/components-registration.html
在日常開發(fā)中，有一些組件是比較常用，但是為了避免在開發(fā)過程中不停地引入，或者在main.js中注冊，，或者每添加一個組件就需要手動注冊一次。則直接進(jìn)行自動化全局注冊。
自動化全局注冊，官網(wǎng)上都詳細(xì)的說明，以下是自己官網(wǎng)的說明基礎(chǔ)上進(jìn)行了一個demo開發(fā)實(shí)例：
1、自定義文件夾：
在src下新建一個components文件夾，用于存放組件。并新建一個用于存放需要自動化全局注冊的組件，例如base。
2、在base文件夾下定義index.js，具體代碼如下示：
// 基礎(chǔ)組件的自動化全局注冊
import Vue from 'vue'
const requireComponent = require.context(
// 其組件目錄的相對路徑
'./',
// 是否查詢其子目錄
true,
// 匹配基礎(chǔ)組件文件名的正則表達(dá)式
/\.vue$/
)
requireComponent.keys().forEach(fileName => {
// 獲取組件配置
const componentConfig = requireComponent(fileName)
// 全局注冊組件
Vue.component(
componentConfig.default.name, // 此處的name,是組件屬性定義的name
// 如果這個組件選項是通過 `export default` 導(dǎo)出的，
// 那么就會優(yōu)先使用 `.default`，
// 否則回退到使用模塊的根。
componentConfig.default
)
})
以上代碼需要解釋的地方：
1、匹配基礎(chǔ)組件文件名的正則表達(dá)式，此處需要根據(jù)實(shí)際的組件名稱和規(guī)則進(jìn)行配置；
2、componentConfig.default.name此處用到的，是表示組件的名稱，并不是固定的寫法?？梢杂貌煌膶懛▉肀硎窘M件名稱，例如可以直接解析fileName得出文件夾的名稱作為組件名稱也是可以的。componentConfig.default.name中的name，來自于組件定義的時候頁面的name。若頁面沒有定義name，則報錯。
3、在main.js中引入index.js文件
由于全局注冊的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生。
// 基礎(chǔ)組件的自動化全局注冊。全局注冊的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生 import './components/base/index'
4、直接在需要的地方使用該組件即可
頁面效果如下示：
以上就是vue 實(shí)現(xiàn)基礎(chǔ)組件的自動化全局注冊的詳細(xì)內(nèi)容，更多關(guān)于vue 組件全局注冊的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章我們將探討Vue3框架的優(yōu)秀特性、使用原理、周邊生態(tài)和實(shí)戰(zhàn)應(yīng)用，系統(tǒng)的學(xué)習(xí)Vue生態(tài)體系，希望和大家共同成長，我們一起探討下Vue3和Vue2的響應(yīng)式原理，那究竟什么是“響應(yīng)式”，接下來跟著小編一起來學(xué)習(xí)吧2023-05-05
uView是uni-app生態(tài)專用的UI框架,uni-app?是一個使用?Vue.js?開發(fā)所有前端應(yīng)用的框架,這篇文章主要給大家介紹了關(guān)于uniapp使用uview的簡單案例,需要的朋友可以參考下2023-03-03
前端的數(shù)據(jù)均是通過接口請求拿到的，而Vue本身不支持ajax請求，那么該怎么解決Vue中的異步請求呢？這兒提供了幾種方法，希望對大家有所幫助2022-05-05
這篇文章主要介紹了Vue 3.0 全家桶搶先體驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue中l(wèi)et that=this的作用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue中優(yōu)雅實(shí)現(xiàn)數(shù)字遞增特效的詳細(xì)過程
項目中需要做數(shù)字滾動增加的效果,一開始很懵,研究了一下原理,發(fā)現(xiàn)很簡單,下面這篇文章主要給大家介紹了關(guān)于vue中優(yōu)雅實(shí)現(xiàn)數(shù)字遞增特效的詳細(xì)過程,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue2.0 自定義組件的方法（vue組件的封裝）,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue切換Tab動態(tài)渲染組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解vuex中mutations方法的使用與實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vuex中mutations方法的使用與實(shí)現(xiàn)的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11
這篇文章主要介紹了vue項目如何配置public靜態(tài)資源路徑訪問方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11