安装

powershell 复制代码

npm i element-plus @element-plus/icons-vue
npm i -D unplugin-auto-import unplugin-vue-components unplugin-icons

修改

修改您的 vite.config.ts 文件如下：

ts 复制代码

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

const pathSrc = path.resolve(__dirname, 'src')

export default defineConfig({
  resolve: {
    alias: {
      '@': pathSrc,
    },
  },
  plugins: [
    Vue(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      resolvers: [
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts')
    }),
    Components({
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep']
        }),
        // 自动导入 Element Plus 组件
        ElementPlusResolver()
      ],
      dts: path.resolve(pathSrc, 'components.d.ts')
    }),
    Icons({
      autoInstall: true
    })
  ]
})

Element Plus使用

Element Plus组件和方法无需显式引入，直接使用即可。否则，可能会导致样式丢失。如果在使用方法时出现类型错误，可以尝试保存并编译项目，插件会自动将类型写入 auto-imports.d.ts 文件，从而避免错误。

Icon图标的使用

在按需引入图标时，模板 <template></template> 中不应使用驼峰命名，而应改为使用短横线 - 命名，并在图标名称之前加上 i-ep- 前缀。

html 复制代码

<template>
  <el-icon>
    <!-- 原来是：<CircleCheckFilled /> -->
    <i-ep-circle-check-filled />
  </el-icon>
</template>

有时候，我们需要使用 v-for 来动态绑定图标。在 <script setup lang="ts"></script> 中，使用驼峰命名并加上 IconEp 前缀。请注意，这不是一个字符串，而是一个对象。在模板 <template></template> 中，使用 <component :is="item.icon" /> 进行绑定。

html 复制代码

<template>
  <el-icon v-for="item in menu" :key="item.name">
    <component :is="item.icon" />
  </el-icon>
</template>
<script setup lang="ts">
const menu = [
  {
    name: '增',
    icon: IconEpPlus
  },
  {
    name: '改',
    icon: IconEpEditPen
  },
  {
    name: '删',
    icon: IconEpDelete
  }
]
</script>

Vite 中的 Element Plus 和 Icon 图标：按需引入的最佳实践

安装

修改

Element Plus使用

Icon图标的使用

参考链接