vue4.x element-ui按需引入

摘要

市面上的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>