Vue按需引入element ui笔记

按官网文档一键配置按需引入总是无法生效，目测可能是激进式预设没有选babel的原因。故写此文详细记录折腾过程，望有效！

vue ui创建新项目

选择预设，bable，eslint，vuex，vue-router(历史模式)

vue ui安装element插件

选择配置

2020-05-01T03:05:01.png

改动的内容

  1. 自动创建了bable.config.js,并添加了内容。
  2. 创建了`@/src/plugins/element.js,设置了按需引入
  3. 改写了app.vue,添加了element按钮组件

运行测试

2020-05-01T03:10:21.png

加载成功

2020-05-01T03:11:11.png

Q&A

  1. 为什么需要bable来支持按需加载
    如果不使用bable转码，那你按需引入会找不到该组件。这是由于bable在将组件库转码的过程中把element整个组件库编译成了各种独立的组件模块，进而实现按需加载的功能

  2. 如何添加需要的组件
    使用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笔记
转载或引用必须申明原指尖魔法屋来源及源地址！