Vue-cli4配置element-ui实现按需引入的方法-创新互联

今天就跟大家聊聊有关Vue-cli4 配置 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 实现按需引入的方法有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联-成都网站建设公司行业资讯频道，感谢大家的支持。

分享文章：Vue-cli4配置element-ui实现按需引入的方法-创新互联
URL链接：http://cqcxhl.com/article/dcppcg.html