资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

今天就跟大家聊聊有关Vue-cli4 配置 element-ui 实现按需引入的方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

成都创新互联公司是一家集网站建设,无极企业网站建设,无极品牌网站建设,网站定制,无极网站建设报价,网络营销,网络优化,无极网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

#1 node与vue的版本情况

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

#2 未按需加载打包后的文件情况

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

由上图看出,只是引入了 element-ui 框架后,js文件急剧的上升到了 783KB,这显然是不能接受的。

element-ui 按需加载文档:https://element.eleme.cn/#/zh-CN/component/quickstart

#3 添加 babel-plugin-component 依赖

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

#4 正确配置按需功能

打开 官方文档地址,找到按需加载的示例代码处,复制 plugins 的内容,不能按文档中说的文件设置,这里是个坑;

打开项目根目录中的 babel.config.js ,粘贴刚才复制的内容,具体结果请看下图;

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

#5 按需引入到模块中

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

#6 已按需加载打包后的文件情况

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

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

啦!啦!啦!按需加载的设置成功了,可以疯狂的进行编码了。

路由懒加载也是一种优化方式哦!

补充知识:vue-cli@4安装Element-ui

vue-cli@3.0之后,element-ui提供相应的element插件,我们可以用这个插件快速的来安装element-ui。只需要cd到工程根目录,运行vue add element即可:

vue add element

1,选择全部导入

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

2,第二步 选择Y

3,第三步直接回车

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

看完上述内容,你们对Vue-cli4 配置 element-ui 实现按需引入的方法有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联-成都网站建设公司行业资讯频道,感谢大家的支持。


文章题目:Vue-cli4配置element-ui实现按需引入的方法-创新互联
本文URL:http://cdkjz.cn/article/dcppcg.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220