Vue-cli4 配置 element-ui 按需引入操作
在按照element-ui文檔和網(wǎng)上各個(gè)文章的描述方式都未能正確配置出按需加載的功能。經(jīng)小編一番摸索之后，終于搞定了，本篇文章記錄實(shí)現(xiàn)的全過程
#1 node與vue的版本情況
#2 未按需加載打包后的文件情況
由上圖看出，只是引入了 element-ui 框架后，js文件急劇的上升到了 783KB，這顯然是不能接受的。
element-ui 按需加載文檔：https://element.eleme.cn/#/zh-CN/component/quickstart
#3 添加 babel-plugin-component 依賴
#4 正確配置按需功能
打開 官方文檔地址，找到按需加載的示例代碼處，復(fù)制 plugins 的內(nèi)容，不能按文檔中說的文件設(shè)置，這里是個(gè)坑；
打開項(xiàng)目根目錄中的 babel.config.js ，粘貼剛才復(fù)制的內(nèi)容，具體結(jié)果請(qǐng)看下圖；
#5 按需引入到模塊中
#6 已按需加載打包后的文件情況
啦！啦！啦！按需加載的設(shè)置成功了，可以瘋狂的進(jìn)行編碼了。
路由懶加載也是一種優(yōu)化方式哦！
補(bǔ)充知識(shí)：vue-cli@4安裝Element-ui
vue-cli@3.0之后，element-ui提供相應(yīng)的element插件，我們可以用這個(gè)插件快速的來安裝element-ui。只需要cd到工程根目錄，運(yùn)行vue add element即可：
vue add element
1，選擇全部導(dǎo)入
2，第二步 選擇Y
3，第三步直接回車
以上這篇Vue-cli4 配置 element-ui 按需引入操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中實(shí)現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時(shí)應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯(cuò)誤,安裝后,需在項(xiàng)目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說明,需要的朋友可以參考下2024-09-09
Element-UI 解決el-table中圖片懸浮被遮擋問題小結(jié)
在開發(fā)中,發(fā)現(xiàn)element-ui在el-table中添加圖片懸浮顯示時(shí),會(huì)被單元格遮擋的問題,對(duì)于此問題解決其實(shí)也并不難,將懸浮圖片放在body節(jié)點(diǎn)下,通過定位顯示即可,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了Vuex 進(jìn)階之模塊化組織詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue?ElementUI級(jí)聯(lián)選擇器回顯問題解決
這篇文章主要介紹了vue?ElementUI級(jí)聯(lián)選擇器回顯問題解決，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vue刷新后頁(yè)面數(shù)據(jù)丟失問題的解決過程
在做vue項(xiàng)目的過程中有時(shí)候會(huì)遇到一個(gè)問題,就是進(jìn)行F5頁(yè)面刷新的時(shí)候,頁(yè)面的數(shù)據(jù)會(huì)丟失,這篇文章主要給大家介紹了關(guān)于Vue刷新后頁(yè)面數(shù)據(jù)丟失問題的解決過程,需要的朋友可以參考下2022-11-11
本文給大家介紹了vue路由攔截的三種方法,全局前置守衛(wèi),路由獨(dú)享守衛(wèi)和全局后置鉤子這三種方法,并通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的方法
在Web開發(fā)中經(jīng)常需要使用圖片,有時(shí)候需要對(duì)圖片進(jìn)行上傳,這篇文章主要給大家介紹了關(guān)于vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
vue2+element-ui使用vue-i18n進(jìn)行國(guó)際化的多語言/國(guó)際化詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于vue2+element-ui使用vue-i18n進(jìn)行國(guó)際化的多語言/國(guó)際化的相關(guān)資料,I18n是Vue.js的國(guó)際化插件,項(xiàng)目里面的中英文等多語言切換會(huì)使用到這個(gè)東西,需要的朋友可以參考下2023-12-12
vue腳手架配置預(yù)渲染及prerender-spa-plugin配置方式
這篇文章主要介紹了vue腳手架配置預(yù)渲染及prerender-spa-plugin配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離
這篇文章主要為大家詳細(xì)介紹了Vue+axios封裝請(qǐng)求實(shí)現(xiàn)前后端分離，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10