摘要
市面上的UI库很多，但是相对于在项目中使用到的UI组件很少，所以没必要全部引入，导致打包文件大的问题，这个时候按需要引入就很必要了，很多UI库都做了按需引入的功能，按照各自的官方文档在你的项目中配置即可。
环境
- node：v10.16.0
- vue-cli: @vue/cli 4.1.2
vue4.x element-ui按需引入
按照vue-cli官方文档创建项目，[传送门]https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create，
方式一
通过vue ui可视化方式添加element-ui组件库
- 1.终端执行vue ui打开项目可视化操作界面
# cd 项目
vue ui
-
2.选择左上角插件，点击右上角添加插件
image.png -
3.搜索element，出现的第一个便是element-ui组件库，点击第一项右边的加号添加组件库在项目，会自动安装相关依赖到项目中
image.png
安装插件时会出现选项，到底是全部引入，还是按需引入，如果不修改的话，默认是全部引入，按需求选择即可，还有一个选项是本地语言选择，默认是中文
image.png
- 4.最后一步可视化操作界面会获取相关文件的改动，你可以选择提交修改（即添加到本地git版本管理），或者是选择跳过，就完成了本次添加插件的过程。
方式二
手动加入element-ui按需引入的相关文件，找到官方文档开发指南快速上手部分，在项目中创建所需文件，脚手架使用的4.x所以对于babel的版本默认使用的是babel7.x版本，所以创建的文件是babel.config.js，不是.babelrc
- 1.安装相关包
yarn add element-ui babel-plugin-component
- 2.项目根目录创建babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
};
- 3.在你需要的文件中引入element-ui的组件，本文见main.js中引入
import Vue from 'vue';
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
- 4.在页面中使用引入的element-ui组件
<template>
<div>
<el-button>el-button</el-button>
</div>
</template>
