快捷導(dǎo)航

Vue自動(dòng)化注冊(cè)全局組件腳本分享

更新時(shí)間：2022年03月30日 15:14:09 作者：興趣使然的Geek

這篇文章主要介紹了Vue自動(dòng)化注冊(cè)全局組件腳本，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

自動(dòng)化注冊(cè)全局組件

今天有一個(gè)idea，vue一些組件，可能會(huì)全局都用到，我覺(jué)得在main.js寫(xiě)

Vue.component(name, instance)

然后很命令式，寫(xiě)著也不好看，想著能夠有一個(gè)函數(shù)可以指定加載比如components下的文件，自動(dòng)完成全局化注冊(cè)，想起來(lái)就很帥

放代碼

export function autoLoadingGlobalComponent() {
? const requireComponent = require.context(
? ? // 其組件目錄的相對(duì)路徑
? ? '../components',
? ? // 是否查詢其子目錄
? ? false,
? ? // 匹配vue后綴文件名的文件
? ? /\.vue$/
? )
? // 遍歷獲取到的文件名，依次進(jìn)行全局注冊(cè)
? requireComponent.keys().forEach(fileName => {
? ? // 獲取組件配置(實(shí)例)
? ? const componentConfig = requireComponent(fileName)
? ? // 獲取組件的 PascalCase 命名(eg: MYHeader)
? ? const componentName = _.upperFirst(
? ? ? // 獲取駝峰式命名
? ? ? _.camelCase(
? ? ? ? // 剝?nèi)ノ募_(kāi)頭的 `./` 和結(jié)尾的擴(kuò)展名 eg: ./food-header.vue -> foodHeader
? ? ? ? fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
? ? ? )
? ? )
? ? ? // 全局注冊(cè)組件
? ? Vue.component(
? ? ? componentName,
? ? ? // 如果這個(gè)組件選項(xiàng)是通過(guò) `export default` 導(dǎo)出的，
? ? ? // 那么就會(huì)優(yōu)先使用 `.default`，
? ? ? // 否則回退到使用模塊的根。
? ? ? componentConfig.default || componentConfig
? ? )
? })
}

vue組件注冊(cè)–全局注冊(cè)

使用require.context實(shí)現(xiàn)前端工程自動(dòng)化(實(shí)現(xiàn)全局組件自動(dòng)化注冊(cè)的js腳本)

vue的組件注冊(cè)分為全局注冊(cè)和局部注冊(cè)，使用上的基本區(qū)分如下：

本文腳本為參考vue官網(wǎng)文檔，并在js腳本代碼和注釋上做了一些調(diào)整，以求看了就理解會(huì)用。因官網(wǎng)文檔總是惜字如金，有些地方還不是那么一下就容易理解和使用，可以把該文章看做官網(wǎng)的進(jìn)化版

全局注冊(cè)：即注冊(cè)完畢后，在全局皆可使用，無(wú)需import引入組件和compoment注冊(cè)組件，直接使用即可。如注冊(cè)的全局組件未使用，webpack在打包時(shí)，仍然會(huì)打包該組件內(nèi)容。(這里個(gè)人認(rèn)為，如果不使用組件，那注冊(cè)它干嘛？所以大部分時(shí)候這個(gè)打包的注意事項(xiàng)可以忽略。當(dāng)然，如果留存組件，以備后續(xù)使用的，也可以進(jìn)行局部注冊(cè))。

局部注冊(cè)：將需要使用的組件寫(xiě)在vue文件中，在需要使用的時(shí)候，利用import引入該文件，compoment注冊(cè)該組件并命名該組件在使用時(shí)的名字，然后即可像使用標(biāo)簽一樣使用此組件。（局部注冊(cè)與全局注冊(cè)的區(qū)別就是，如果局部注冊(cè)的組件你沒(méi)有使用過(guò)，那么在webpack打包時(shí)就不會(huì)打包該文件，如有組件留存在項(xiàng)目中，但后續(xù)可能會(huì)使用的，可以使用局部注冊(cè)）

廢話不多說(shuō)，開(kāi)始代碼；前面一段是該腳本使用的基本介紹，實(shí)用黨可跳過(guò)（建議都了解一下）

基本思路

一個(gè)webpack的api,通過(guò)執(zhí)行require.context函數(shù)獲取一個(gè)特定的上下文,主要用來(lái)實(shí)現(xiàn)自動(dòng)化導(dǎo)入模塊,在前端工程中,如果遇到從一個(gè)文件夾引入很多模塊的情況,可以使用這個(gè)api,它會(huì)遍歷文件夾中的指定文件,然后自動(dòng)導(dǎo)入,使得不需要每次顯式的調(diào)用import導(dǎo)入模塊

使用場(chǎng)景

在過(guò)去的組件需要導(dǎo)入和全局注冊(cè)時(shí)，利用require.context函數(shù)，進(jìn)行批量注冊(cè)，使得組件注冊(cè)實(shí)現(xiàn)自動(dòng)化，即使用新的組件需要全局注冊(cè)，只需要在自定的文件夾下創(chuàng)建即可全局使用，但創(chuàng)建時(shí)要注意自己的自動(dòng)化文件中的查找文件的匹配規(guī)則，否則，不符合自定義的查找規(guī)則，無(wú)法自動(dòng)注冊(cè)為全局組件。

注意：**所有需要全局注冊(cè)的組件，都要在指定的文件夾內(nèi)，否則該腳本遍歷不到你的組件，就無(wú)法進(jìn)行自動(dòng)化的注冊(cè)和使用了

在項(xiàng)目為webpack打包時(shí)，使用自動(dòng)化全局注冊(cè)會(huì)更加友好：

基本代碼如下：

import vue from 'vue'
const requireComponent = require.context( // webpack的api，一個(gè)函數(shù)方法，匹配文件
  '.', // 查看當(dāng)前目錄下的文件(查找需要文件的相對(duì)路徑)
  false, // 不查看子文件
  /.vue$/ // 匹配方式正則表達(dá)式，只查看后綴為.vue的文件
)
console.log(requireComponent)
// 循環(huán)獲取到的文件，可在循環(huán)時(shí)處理文件名
requireComponent.keys().forEach((fileName) => {
  console.log(1)
  // 獲取組件配置(組件模板)
  const componentConfig = requireComponent(fileName)
  // 將被注冊(cè)的組件名字,對(duì)獲取的組件文件名進(jìn)行處理
  const componentName = fileName
    .replace(/^\.\/_/, '')
    .replace(/\.\w+$/, '')
    .split('./')
    .join('')
  console.log(componentName, '基礎(chǔ)組件文件獲取測(cè)試')
  // 將組件在循環(huán)中注冊(cè)到全局，
  vue.component(componentName, // 依據(jù)文件名處理好的，將要被注冊(cè)到全局的組件名
    componentConfig.default || componentConfig)
})

在文件正確打印出處理好的組件名時(shí)，即表示自動(dòng)化組件注冊(cè)基本完成，然后在main.js中引入自動(dòng)化組件注冊(cè)的js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './components/component/_globals' // 直接引入共享到全局即可實(shí)現(xiàn)自動(dòng)化組件注冊(cè)
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

需要注意的是：在團(tuán)隊(duì)合作時(shí)，需要注意自動(dòng)化文件中指定的組件文件夾，和匹配文件名的規(guī)則

如下為具體的文件位置和使用效果的截圖：

在這里插入圖片描述