Vue按需引入element ui笔记
按官网文档一键配置按需引入总是无法生效,目测可能是激进式预设没有选babel的原因。故写此文详细记录折腾过程,望有效!
vue ui创建新项目
选择预设,bable,eslint,vuex,vue-router(历史模式)
vue ui安装element插件
选择配置
改动的内容
- 自动创建了
bable.config.js
,并添加了内容。 - 创建了`@/src/plugins/element.js,设置了按需引入
- 改写了
app.vue
,添加了element按钮组件
运行测试
加载成功
Q&A
-
为什么需要bable来支持按需加载
如果不使用bable转码,那你按需引入会找不到该组件。这是由于bable在将组件库转码的过程中把element整个组件库编译成了各种独立的组件模块,进而实现按需加载的功能 -
如何添加需要的组件
使用vue ui添加后的组件会在plugins目录下创建element.js文件,然后在main.js中引入该文件。文件内容如下:
import Vue from "vue";
import { Button } from "element-ui";
Vue.use(Button);
这就是只引入Button的方法,如果要按需添加,只需要依葫芦画瓢即可!
版权声明: (https://www.thinkmoon.cn/post/843)
本文首发于指尖魔法屋- Vue按需引入element ui笔记
转载或引用必须申明原指尖魔法屋来源及源地址!