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