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 正確配置按需功能
打開 官方文檔地址，找到按需加載的示例代碼處，復(fù)制 plugins 的內(nèi)容，不能按文檔中說的文件設(shè)置，這里是個坑；
打開項目根目錄中的 babel.config.js ，粘貼剛才復(fù)制的內(nèi)容，具體結(jié)果請看下圖；
#5 按需引入到模塊中
#6 已按需加載打包后的文件情況
啦！啦！啦！按需加載的設(shè)置成功了，可以瘋狂的進行編碼了。
路由懶加載也是一種優(yōu)化方式哦！
補充知識：vue-cli@4安裝Element-ui
vue-cli@3.0之后，element-ui提供相應(yīng)的element插件，我們可以用這個插件快速的來安裝element-ui。只需要cd到工程根目錄，運行vue add element即可：
vue add element
1，選擇全部導(dǎo)入
2，第二步 選擇Y
3，第三步直接回車
以上這篇Vue-cli4 配置 element-ui 按需引入操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用axios發(fā)送請求簡單實現(xiàn)代碼
axios是一個基于Promise的，發(fā)送http請求的一個工具庫，并不是vue中的第三方插件，使用時不能通過“Vue.use()”安裝插件，需要在原型上進行綁定2023-04-04
離放假還有1天，今天小編抽空給大家分享前端時間小編做的vue項目，非常完整，需要的朋友參考下2018-02-02
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實例初始化之后,進行數(shù)據(jù)偵聽和事件，偵聽器的配置之前同步調(diào)用2022-06-06
下面小編就為大家分享一篇vue項目中的webpack-dev-sever配置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
Vue3+ElementPlus el-date-picker設(shè)置可選時間范圍的示例代碼
在Vue3中使用Element Plus的el-date-picker組件設(shè)置可選時間范圍，你可以使用disabled-date屬性，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-07-07
這篇文章主要為大家詳細介紹了vue調(diào)用語音播放的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Vue是一種流行的Web開發(fā)框架,它提供了一個雙向綁定的語法糖。在Vue中,我們可以很容易地獲取頁面上的數(shù)據(jù),并且可以實時的響應(yīng)其變化,這篇文章主要給大家介紹了關(guān)于Vue獲取input值的四種常用方法,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下2017-10-10
props屬性是父子組件之間的通信橋梁。這篇文章主要介紹了Vue中props的使用,需要的朋友可以參考下2018-06-06
基于Vue實現(xiàn)鼠標(biāo)滾動輪控制頁面橫向滑動效果
這篇文章主要介紹了如何基于Vue實現(xiàn)鼠標(biāo)滾動輪控制頁面橫向滑動效果,文中通過代碼示例和圖文結(jié)合的方式給大家講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09