1、安装element-plus依赖

npm install element-plus --save

2、引入element-plus依赖

• 本文使用的依赖方式为按需应用中的自动导入，按需应用可以减少打包后文件的大小，如果不在乎大小也可使用全局引用。
• 要使用按需引用中的自动导入需要安装额外的两个插件：unplugin-vue-components和unplugin-auto-import

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

安装完成后我们需要配置一下项目根目录的vite的配置文件 vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

配置完上面的这些以后基本上就可以使用了，但是当使用ElementUI的API调用组件时还需要手动的引用样式，例如我们想使用ElMessage这个组件，需要引入组件并引入它的样式文件：

import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'

如果不喜欢这样每次配置样式也可以使用插件unplugin-element-plus来导入样式，安装它前需要添加sass和sass-loader依赖

npm install sass sass-loader  unplugin-element-plus

然后在vite.config.js配置文件中添加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({
      useSource: true
    })
  ]
})