為何要封裝一個(gè)封裝全局組件引入，因?yàn)槲覀兤饺斩x多個(gè)全局組件的時(shí)候，在 main.js 里進(jìn)行單個(gè)全局組件的時(shí)候太麻煩了，有10個(gè)全局組件要 import 10次，還要 Vue.use(組件) 10次，太麻煩了。我們現(xiàn)在手動(dòng)封裝一下。

現(xiàn)在 common 文件夾下面有3 個(gè)全局組件，global.js 是我們對(duì)全局引入的代碼的封裝。

2. 封裝全局組件的 js

global.js 代碼如下：

// 封裝全局組件的引入
import Vue from 'vue';
// 將字符串首字母大寫 返回當(dāng)前字符串
function changeStr (str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
/**
 * require.context 是 webpack 的API, 作用是可以動(dòng)態(tài)引入文件
 * 第一個(gè)參數(shù)是指當(dāng)前要引入文件的路徑, 當(dāng)前 global.js 與 child 這些組件平級(jí)，可以用 './'或者 '.'
 * 第二個(gè)參數(shù)是指是否匹配子級(jí)，這里沒(méi)有子級(jí)，為 false
 * 第三個(gè)參數(shù)是指匹配 .vue 文件
 */
const requireComponent = require.context('./', false, /\.vue$/);
console.log(requireComponent, '所有的組件集合')
requireComponent.keys().forEach(fileName => {
  console.log(fileName, 'fileName')
  // 當(dāng)前組件
  const config = requireComponent(fileName);
  console.log(config, '當(dāng)前組件')
  const componentNmae = changeStr(
    // 這里是把 ./child1.vue 變成 child, 然后通過(guò) changeStr 把 child 轉(zhuǎn)化成 Child
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
  )
  console.log(componentNmae, '組件名')
  // 注冊(cè)組件
  Vue.component(componentNmae, config.default || config);
});

3. 在 main.js 中

在 main.js 中引入這個(gè)封裝好的 js, 注意：這里不需要通過(guò) Vue.use(global)

import global from './components/common/global.js'

4. 我們要引入這些公共組件就可以直接用啦

這樣就不用再引入了，很方便對(duì)不對(duì)，比心。

到此這篇關(guān)于vue 為什么要封裝全局組件引入的文章就介紹到這了,更多相關(guān)vue 封裝全局組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue router嵌套路由在history模式下刷新無(wú)法渲染頁(yè)面問(wèn)題的解決方法
這篇文章主要介紹了vue router嵌套路由在history模式下刷新無(wú)法渲染頁(yè)面問(wèn)題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的代碼詳解
這篇文章給大家介紹了ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的詳細(xì)步驟,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-01-01
vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)和解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
Vue采用異步渲染的原理分析
對(duì)于Vue為何采用異步渲染，簡(jiǎn)單來(lái)說(shuō)就是為了提升性能，因?yàn)椴徊捎卯惒礁拢诿看胃聰?shù)據(jù)都會(huì)對(duì)當(dāng)前組件進(jìn)行重新渲染，為了性能考慮，Vue會(huì)在本輪數(shù)據(jù)更新后，再去異步更新視圖，本文主要通過(guò)幾個(gè)實(shí)例給大家介紹一下Vue為何采用異步渲染,需要的朋友可以參考下
2023-06-06
17個(gè)vue常用的數(shù)組方法總結(jié)與實(shí)例演示
這篇文章主要介紹了vue中常用的數(shù)組方法,包括：VUE數(shù)組轉(zhuǎn)換字符串，VUE數(shù)組遍歷，VUE數(shù)組過(guò)濾，VUE數(shù)組查詢,VUE數(shù)組排序等功能，需要的朋友可以參考下
2022-12-12
vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟
隨著 Vite2 的發(fā)布并日趨穩(wěn)定，現(xiàn)在越來(lái)越多的項(xiàng)目開(kāi)始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟，感興趣的可以了解一下
2021-07-07
如何用vue3+Element?plus實(shí)現(xiàn)一個(gè)完整登錄功能
要實(shí)現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫(kù)實(shí)現(xiàn)一個(gè)完整的登錄功能,文中提供了詳細(xì)的代碼示例,需要的朋友可以參考下
2023-10-10
關(guān)于vue3使用particles粒子特效的問(wèn)題
這篇文章主要介紹了關(guān)于vue3使用particles粒子特效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue使用qrcode生成二維碼的方法
這篇文章給大家介紹了vue使用qrcode生成二維碼的方法,在Vue中實(shí)現(xiàn)二維碼生成需要使用第三方庫(kù)來(lái)處理生成二維碼的邏輯,常用的庫(kù)有qrcode和vue-qrcode,所以接下來(lái)小編將給大家介紹vue?qrcode生成二維碼的方法示例,需要的朋友可以參考下
2024-01-01