vue?為什么要封裝全局組件引入
更新時間：2022年07月04日 10:56:14 作者：??噠噠噠528520????
這篇文章主要介紹了vue為什么要封裝全局組件引入，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下
1.為什么要封裝全局組件引入
為何要封裝一個封裝全局組件引入，因為我們平日定義多個全局組件的時候，在 main.js 里進行單個全局組件的時候太麻煩了，有10個全局組件要 import 10次，還要 Vue.use(組件) 10次，太麻煩了。我們現(xiàn)在手動封裝一下。
現(xiàn)在 common 文件夾下面有3 個全局組件，global.js 是我們對全局引入的代碼的封裝。
2. 封裝全局組件的 js
global.js 代碼如下：
// 封裝全局組件的引入
import Vue from 'vue';
// 將字符串首字母大寫 返回當前字符串
function changeStr (str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
/**
* require.context 是 webpack 的API, 作用是可以動態(tài)引入文件
* 第一個參數(shù)是指當前要引入文件的路徑, 當前 global.js 與 child 這些組件平級，可以用 './'或者 '.'
* 第二個參數(shù)是指是否匹配子級，這里沒有子級，為 false
* 第三個參數(shù)是指匹配 .vue 文件
*/
const requireComponent = require.context('./', false, /\.vue$/);
console.log(requireComponent, '所有的組件集合')
requireComponent.keys().forEach(fileName => {
console.log(fileName, 'fileName')
// 當前組件
const config = requireComponent(fileName);
console.log(config, '當前組件')
const componentNmae = changeStr(
// 這里是把 ./child1.vue 變成 child, 然后通過 changeStr 把 child 轉(zhuǎn)化成 Child
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
console.log(componentNmae, '組件名')
// 注冊組件
Vue.component(componentNmae, config.default || config);
});3. 在 main.js 中
在 main.js 中引入這個封裝好的 js, 注意：這里不需要通過 Vue.use(global)
import global from './components/common/global.js'
4. 我們要引入這些公共組件就可以直接用啦
這樣就不用再引入了，很方便對不對，比心。
到此這篇關(guān)于vue 為什么要封裝全局組件引入的文章就介紹到這了,更多相關(guān)vue 封裝全局組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue router嵌套路由在history模式下刷新無法渲染頁面問題的解決方法
這篇文章主要介紹了vue router嵌套路由在history模式下刷新無法渲染頁面問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
ElementUI實現(xiàn)el-table列寬自適應的代碼詳解
這篇文章給大家介紹了ElementUI實現(xiàn)el-table列寬自適應的詳細步驟,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-01-01
vue3+vite:src使用require動態(tài)導入圖片報錯的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動態(tài)導入圖片報錯和解決方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
對于Vue為何采用異步渲染，簡單來說就是為了提升性能，因為不采用異步更新，在每次更新數(shù)據(jù)都會對當前組件進行重新渲染，為了性能考慮，Vue會在本輪數(shù)據(jù)更新后，再去異步更新視圖，本文主要通過幾個實例給大家介紹一下Vue為何采用異步渲染,需要的朋友可以參考下2023-06-06
17個vue常用的數(shù)組方法總結(jié)與實例演示
這篇文章主要介紹了vue中常用的數(shù)組方法,包括：VUE數(shù)組轉(zhuǎn)換字符串，VUE數(shù)組遍歷，VUE數(shù)組過濾，VUE數(shù)組查詢,VUE數(shù)組排序等功能，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
隨著 Vite2 的發(fā)布并日趨穩(wěn)定，現(xiàn)在越來越多的項目開始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項目的實現(xiàn)步驟，感興趣的可以了解一下2021-07-07
如何用vue3+Element?plus實現(xiàn)一個完整登錄功能
要實現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫實現(xiàn)一個完整的登錄功能,文中提供了詳細的代碼示例,需要的朋友可以參考下2023-10-10
關(guān)于vue3使用particles粒子特效的問題
這篇文章主要介紹了關(guān)于vue3使用particles粒子特效的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章給大家介紹了vue使用qrcode生成二維碼的方法,在Vue中實現(xiàn)二維碼生成需要使用第三方庫來處理生成二維碼的邏輯,常用的庫有qrcode和vue-qrcode,所以接下來小編將給大家介紹vue?qrcode生成二維碼的方法示例,需要的朋友可以參考下2024-01-01