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

淩亂°似流年 2024-03-23 15:05 108阅读 0赞

## 前言 ##

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的元素，并且不用考虑导入的问题。