在使用vue構(gòu)建項(xiàng)目的過程中阅茶，我們會(huì)設(shè)置一些通用組件蛛枚，包含一些基礎(chǔ)的功能，會(huì)被我們?cè)陧?xiàng)目中頻繁調(diào)用脸哀。此時(shí)若在每一個(gè)組件頁(yè)面都進(jìn)行引用蹦浦，將會(huì)有很多重復(fù)冗雜的代碼，可改為全局注冊(cè)撞蜂。步驟如下：
- 將這些通用基礎(chǔ)組件放在同一個(gè)文件夾下：如 components/common/盲镶。
- 在應(yīng)用入口文件（main.js）全局導(dǎo)入，參考官方文檔,根據(jù)實(shí)際情況稍作修改蝌诡。
npm安裝lodash
npm i --save lodash
配置main.js文件：
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其組件目錄的相對(duì)路徑
'./components/common/',
// 是否查詢其子目錄
true,
// 匹配基礎(chǔ)組件文件名的正則表達(dá)式
/[A-Za-z0-9-_]+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 獲取組件配置
const componentConfig = requireComponent(fileName)
// 獲取組件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 獲取和目錄深度無關(guān)的文件名
fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// 全局注冊(cè)組件
Vue.component(
componentName,
// 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的溉贿，
// 那么就會(huì)優(yōu)先使用 `.default`，
// 否則回退到使用模塊的根浦旱。
componentConfig.default || componentConfig
)
})
注意全局注冊(cè)的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生宇色。
- 現(xiàn)在就可以在相應(yīng)的頁(yè)面愉快的使用注冊(cè)好的全局組件了。
