vue?為什么要封裝全局組件引入
更新時間：2022年07月04日 10:56:14 作者：??噠噠噠528520????
這篇文章主要介紹了vue為什么要封裝全局組件引入，文章圍繞主題展開詳細(xì)的內(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';
// 將字符串首字母大寫 返回當(dāng)前字符串
function changeStr (str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
/**
* require.context 是 webpack 的API, 作用是可以動態(tài)引入文件
* 第一個參數(shù)是指當(dāng)前要引入文件的路徑, 當(dāng)前 global.js 與 child 這些組件平級，可以用 './'或者 '.'
* 第二個參數(shù)是指是否匹配子級，這里沒有子級，為 false
* 第三個參數(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, 然后通過 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)文章
關(guān)于delete和Vue.delete的區(qū)別及說明
這篇文章主要介紹了關(guān)于delete和Vue.delete的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中的虛擬dom知識點總結(jié)，文章圍繞主題內(nèi)容展開詳細(xì)介紹，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-04-04
本文通過實例代碼給大家介紹了vue實現(xiàn)個人信息查看和密碼修改功能，文中給大家補充介紹了vue實現(xiàn)密碼顯示隱藏切換功能，非常不錯，具有一定的參考借鑒價值，感興趣的朋友一起看看吧2018-05-05
這篇文章主要介紹了Vue替代vuex的存儲庫Pinia，聽說pinia與vue3更配,便開啟了vue3的學(xué)習(xí)之路，pinia 和 vuex 具有相同的功效， 是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)2022-09-09
這篇文章主要介紹了解決Antd Table組件表頭不對齊的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Mock.js 是一個可以在開發(fā)階段模擬后端數(shù)據(jù)接口的 JavaScript 庫,它能夠生成大量不同類型的隨機數(shù)據(jù),并且模擬真實的接口返回,允許前端開發(fā)在沒有真實后端接口的情況下進行開發(fā),本文給大家介紹了Vue2項目中Mock.js的完整集成與使用教程,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了vue-cli3打包時圖片壓縮處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家介紹了詳解vue3中如何使用youtube-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue3+Vite+TS實現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga
這篇文章主要介紹了在Vue3+Vite+TS的基礎(chǔ)上實現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga，下面文章也將圍繞實現(xiàn)二次封裝element-plus業(yè)務(wù)組件sfasga的相關(guān)介紹展開相關(guān)內(nèi)容，具有一定的參考價值，需要的小伙伴可惡意參考一下2021-12-12
vue使用路由守衛(wèi)實現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開發(fā)后臺管理系統(tǒng)時,?般都會涉及到菜單的權(quán)限控制問題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-06-06