简单上手element-ui，三分钟学会按需导入~

前言

element-ui是由“饿了吗”团队开发的一个基于Vue框架的组件库，它提供了很多方便的api接口，可以快速的开发通用的页面。
呸，讲这些没用的东西干嘛
下面我们就简单的讲讲，怎么快速的上手使用。

ps:由于现在vue3已经成为新版本趋势，这里只介绍对应于vue3的element-plus安装

安装

安装的指令很简单，这里我以常用的npm包管理器来作为示例：

npm install element-plus --save

官网也提供了直接使用cdn引入的方法，这里不多作介绍。

导入

element-ui是分模块设计的，因此我们也需要导入使用的模块。
三种导入方式分别为全部导入、按需导入和手动导入。
全部导入虽然方便，但打包的体积将会十分巨大。
手动导入需要每次根据使用的模块进行导入，过于繁琐。
个人推荐的导入方式是按需导入（同时也是官方推荐），因此只介绍按需导入的方式。

按需导入

首先需要下载两个插件，分别是 unplugin-vue-components 和 unplugin-auto-import这两款插件。

npm install -D unplugin-vue-components unplugin-auto-import

导入之后我们还需要对打包工具进行配置，它的工作原理是自动检查我们用到的模块，并将其 ‘import语句’ 添加我们的组件中。

vite配置

这里以vue3的官方工具vite为例：
可将vite.config.js内容配置如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

webpack配置

如果你使用的是webpack，那么可以这样配置：

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

结语

这样一来，按需导入的步骤就完成啦，你可以在vue组件中任意的使用element-ui的元素，并且不用考虑导入的问题。