Vue按需引入element ui笔记

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

vue ui创建新项目

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

vue ui安装element插件

选择配置

改动的内容

1. 自动创建了bable.config.js,并添加了内容。

2. 创建了`@/src/plugins/element.js,设置了按需引入

3. 改写了app.vue,添加了element按钮组件

运行测试

加载成功

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的方法，如果要按需添加，只需要依葫芦画瓢即可！

按需引入真正要解决的问题

按需引入的目标是避免把从未使用的组件和样式打进首屏资源，但不要只看配置文件就默认优化成功。构建后应比较 JS、CSS 体积和页面实际加载情况，确认不是在业务代码里又对 Element UI 做了一次全量 Vue.use()。

组件的 JavaScript 和样式需要同步处理。只引入组件没有引入对应 CSS，页面会显示成几乎没样式的原生控件；样式全量引入、组件按需引入，则只节省了部分 JS。对于组件使用非常多的后台系统，全量引入和按需引入的差距也可能没想象中大，应以构建分析为准。

这篇笔记对应 Vue 2 和 Element UI。Vue 3 项目一般使用 Element Plus，插件、自动导入和构建工具已经不是同一套配置。新项目要查当前组件库文档，老项目则应锁定 Babel 插件和 Element UI 版本，避免重装依赖后构建规则发生变化。

可用性说明：本文发布于 2020 年 6 月，距今已超过五年。文中涉及的软件版本、接口、下载地址、命令参数和操作界面可能已经发生变化，部分方案在当前环境下可能失效。请结合官方最新文档核对后再操作，生产环境使用前务必先行验证。

版权声明: 本文首发于 指尖魔法屋- Vue按需引入element ui笔记（https://blog.thinkmoon.cn/post/843-notes-component-vue-element/） 转载或引用必须申明原指尖魔法屋来源及源地址！