|
|
在按照element-ui文档和网上各个文章的描述方式都未能正确配置出按需加载的功能。经小编一番摸索之后，终于搞定了，本篇文章记录实现的全过程2 H" ?; \+ f" G0 v Z1 r
#1 node与vue的版本情况
y) y+ @+ O9 o) | ! H; u7 X& g! p+ Y+ w2 {; S; e
#2 未按需加载打包后的文件情况 M% Y5 Y( I3 s" c. w
# I, {6 V; }- @1 k! H9 d4 L+ l由上图看出，只是引入了 element-ui 框架后，js文件急剧的上升到了 783KB，这显然是不能接受的。" l7 u9 [% q3 b; t% q9 e v. Y: Q8 m
element-ui 按需加载文档：https://element.eleme.cn/#/zh-CN/component/quickstart! s* j- y4 ]; H$ ^/ n8 F
#3 添加 babel-plugin-component 依赖0 e* }- p. \& F$ y- J$ _; g: i* A
 $ }. ~- o5 S5 q( q1 F3 U: Q
#4 正确配置按需功能5 |! N* J! I2 [3 D l, ]
打开 官方文档地址，找到按需加载的示例代码处，复制 plugins 的内容，不能按文档中说的文件设置，这里是个坑；$ l9 _0 ~- Y. e9 C ^; t8 c+ ]
打开项目根目录中的 babel.config.js ，粘贴刚才复制的内容，具体结果请看下图；: s" u) x: m) }! h/ c; p
7 c3 X/ H* y, ^ o' x: I#5 按需引入到模块中
5 E7 P: X, d5 Y1 O
( G* l. Z. A4 ? H" x( p#6 已按需加载打包后的文件情况
; l- l! `: \7 K" U) u4 E, Q
5 S6 h9 Z$ a' ` w8 Z & \ |6 a, L2 B3 `, g
啦！啦！啦！按需加载的设置成功了，可以疯狂的进行编码了。- o. L0 U2 F: Y% x
路由懒加载也是一种优化方式哦！
7 C0 z; A" J6 |; s补充知识：vue-cli@4安装Element-ui; `+ E+ `* s3 n) u
vue-cli@3.0之后，element-ui提供相应的element插件，我们可以用这个插件快速的来安装element-ui。只需要cd到工程根目录，运行vue add element即可：
# H' ]. u8 I/ Rvue add element) w( ^- U( T& }) q. {" [# I* x
1，选择全部导入
! {7 t5 M( r% h, G4 V3 K ' Q& t; l: P/ z
2，第二步 选择Y e0 ]+ ^4 g* s: A% [
3，第三步直接回车6 O- D0 b/ G$ B5 F9 ]5 O
0 {$ u, v2 w5 S, {( @1 r7 ]以上这篇Vue-cli4 配置 element-ui 按需引入操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
, l& l" u( _) t
H+ s8 \7 t0 w& f: g% f! B来源：http://www.jb51.net/article/195456.htm
" W! w! K4 N$ J# S+ l2 M免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
×
|
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
发表于 2020-9-18 19:31:47
