Vue-cli4 配置 element-ui 按需引入操作
更新时间：2020年09月11日 14:34:03 作者：黄河爱浪
这篇文章主要介绍了Vue-cli4 配置 element-ui 按需引入操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在按照element-ui文档和网上各个文章的描述方式都未能正确配置出按需加载的功能。经小编一番摸索之后，终于搞定了，本篇文章记录实现的全过程
#1 node与vue的版本情况
#2 未按需加载打包后的文件情况
由上图看出，只是引入了 element-ui 框架后，js文件急剧的上升到了 783KB，这显然是不能接受的。
element-ui 按需加载文档：https://element.eleme.cn/#/zh-CN/component/quickstart
#3 添加 babel-plugin-component 依赖
#4 正确配置按需功能
打开 官方文档地址，找到按需加载的示例代码处，复制 plugins 的内容，不能按文档中说的文件设置，这里是个坑；
打开项目根目录中的 babel.config.js ，粘贴刚才复制的内容，具体结果请看下图；
#5 按需引入到模块中
#6 已按需加载打包后的文件情况
啦！啦！啦！按需加载的设置成功了，可以疯狂的进行编码了。
路由懒加载也是一种优化方式哦！
补充知识：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 按需引入操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
axios是一个基于Promise的，发送http请求的一个工具库，并不是vue中的第三方插件，使用时不能通过“Vue.use()”安装插件，需要在原型上进行绑定2023-04-04
离放假还有1天，今天小编抽空给大家分享前端时间小编做的vue项目，非常完整，需要的朋友参考下2018-02-02
这篇文章主要介绍了Vue 全部生命周期组件梳理整理，在创建组件之前使用；在实例初始化之后,进行数据侦听和事件，侦听器的配置之前同步调用2022-06-06
下面小编就为大家分享一篇vue项目中的webpack-dev-sever配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
Vue3+ElementPlus el-date-picker设置可选时间范围的示例代码
在Vue3中使用Element Plus的el-date-picker组件设置可选时间范围，你可以使用disabled-date属性，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-07-07
这篇文章主要为大家详细介绍了vue调用语音播放的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue router仿天猫底部导航栏功能,需要的朋友可以参考下2017-10-10
props属性是父子组件之间的通信桥梁。这篇文章主要介绍了Vue中props的使用,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了如何基于Vue实现鼠标滚动轮控制页面横向滑动效果,文中通过代码示例和图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-09-09
最新评论