京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1634|回复: 0

Vue-cli4 配置 element-ui 按需引入操作

[复制链接]

25

主题

0

回帖

10

积分

新手上路

积分
10
发表于 2020-9-18 19:31:47 | 显示全部楼层 |阅读模式 来自 中国
在按照element-ui文档和网上各个文章的描述方式都未能正确配置出按需加载的功能。经小编一番摸索之后,终于搞定了,本篇文章记录实现的全过程9 B- F# m: ~6 l7 I2 \, g8 i
#1 node与vue的版本情况4 O$ E( {/ Z* C! s9 y+ @; u
) ^6 w! X* c5 d
#2 未按需加载打包后的文件情况( W' h- W2 o' M% {) J: f: N3 C; V

! C' o+ Z- \: E由上图看出,只是引入了 element-ui 框架后,js文件急剧的上升到了 783KB,这显然是不能接受的。
3 y; `) {8 z7 ~element-ui 按需加载文档:https://element.eleme.cn/#/zh-CN/component/quickstart
/ t/ k7 Y$ d/ ~  }#3 添加 babel-plugin-component 依赖1 l2 ^& E0 R: Q4 ?
9 i9 f4 q$ P, O# `6 L
#4 正确配置按需功能# \4 h; G; x, w+ I& p% \4 s
打开 官方文档地址,找到按需加载的示例代码处,复制 plugins 的内容,不能按文档中说的文件设置,这里是个坑;' H, Q' t! ?6 F1 H) H- X
打开项目根目录中的 babel.config.js ,粘贴刚才复制的内容,具体结果请看下图;
" J4 _# f% u' X5 v; W3 R
! w/ L$ E: ]) c" l* r  Q#5 按需引入到模块中
# L; |( Z; h- z' v  d, }4 a3 K& m- S0 H1 B: @# d+ U6 I- Q4 @$ l, m& U) E
#6 已按需加载打包后的文件情况
+ K+ n3 O! Z7 F  s) H
" ^, P9 [' b1 B: n( N) y% G, X
" c9 M6 h( y2 W6 U% s6 @啦!啦!啦!按需加载的设置成功了,可以疯狂的进行编码了。' J, Z  U5 r' E2 Z$ F
路由懒加载也是一种优化方式哦!9 J$ y& T6 ~) ~* H) b9 `3 I
补充知识:vue-cli@4安装Element-ui
1 [7 ]& }; h8 c" c1 nvue-cli@3.0之后,element-ui提供相应的element插件,我们可以用这个插件快速的来安装element-ui。只需要cd到工程根目录,运行vue add element即可:
) ?) Q% O: w3 [! M/ F* j9 P
vue add element
/ t3 J+ i5 @# M; h* I! T9 ~* E# g- c
1,选择全部导入
+ V4 E3 y+ l/ [  |
+ L# A+ }5 [8 C2,第二步 选择Y7 n  G  s4 m  U" T
3,第三步直接回车5 E; \/ S$ T& n. @7 `" d
0 \/ {( j# A" J5 M( \! `6 v1 o) f% Y
以上这篇Vue-cli4 配置 element-ui 按需引入操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
( ~8 u* ?* K& a5 L
. }- V: T! f  y2 r( z来源:http://www.jb51.net/article/195456.htm1 z' O+ c8 Y; X) [4 B
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

帖子地址: 

梦想之都-俊月星空 优酷自频道欢迎您 http://i.youku.com/zhaojun917
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2025-10-20 11:46 , Processed in 0.035749 second(s), 23 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表