ElementPlus组件与图标按需自动引入

按需自动引入组件

  1. 安装ElementPlus和自动导入ElementPlus组件的插件
javascript 复制代码
pnpm install element-plus
javascript 复制代码
pnpm install -D unplugin-vue-components unplugin-auto-import
  1. vite.config.ts进行修改
javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自动导入
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(),
    // 自动导入ElementPlus组件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // 自动注册ElementPlus组件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

然后就可以进行测试了

javascript 复制代码
<template>
  <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger" @click="click">Danger</el-button>
  </div>
</template>

<script lang="ts" setup>
const click = () => {
  ElMessage.error('Error Message')
}
</script>

使用ElementPlus的组件就会自动在根目录下生成下面两个文件

如果想更改这两个文件的位置,可以传入第二个参数,里面指定文件的位置。由于用到了node的东西,所以最好安装下node的ts类型插件,这样编译器不爆红

javascript 复制代码
pnpm i -D @types/node
javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 引入node的url模块
import { fileURLToPath } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入ElementPlus组件
    AutoImport({
      resolvers: [ElementPlusResolver()],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),
    }),
    // 自动注册ElementPlus组件
    Components({
      resolvers: [ElementPlusResolver()],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),
    }),
  ],
})

现在文件就生成在了types文件夹内了

按需自动引入图标

  1. 首先安装依赖
javascript 复制代码
pnpm install @element-plus/icons-vue
javascript 复制代码
pnpm i -D unplugin-icons unplugin-auto-import
  1. vite.config.ts进行修改
javascript 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 引入node的url模块
import { fileURLToPath } from 'node:url'
//  ElementPlus的Icon自动导入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入ElementPlus组件
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),
    }),
    // 自动注册ElementPlus组件
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),
    }),
    // 自动安装图标
    Icons({
      autoInstall: true,
    }),
  ],
})

然后就可以进行测试了

javascript 复制代码
<template>
  <div>
    <el-icon color="pink">
      <Edit />
    </el-icon>
  </div>
</template>

会发现图标并没有显示出来

其实是换组件名了,可以看下下面的文件,改成对应的组件名就可以显示了

但是有时候,其他组件想用图标,应该怎么写呢?其实正常引入就可以了

javascript 复制代码
<template>
  <div>
    <el-icon color="pink">
      <IEpEdit />
    </el-icon>

    <el-button type="primary" :icon="Edit" circle />
  </div>
</template>

<script lang="ts" setup>
import { Edit } from '@element-plus/icons-vue'
</script>
相关推荐
_请输入用户名3 分钟前
EventEmitter 是广播,Tapable 是流水线:聊聊它们的本质区别
前端·设计模式
爱学习的茄子4 分钟前
React Fiber:让大型应用告别卡顿的性能革命
前端·react.js·面试
龙在天5 分钟前
我是前端,我来总结一下前端 配 Nginx 的一些案例
前端
Thetimezipsby8 分钟前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
掘金安东尼19 分钟前
前端周刊430期(2025年9月1日–9月7日)
前端
BUG创建者26 分钟前
uni 拍照上传拍视频上传以及相册
前端·javascript·音视频
就是帅我不改33 分钟前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
JackJiang33 分钟前
转转客服IM系统的WebSocket集群架构设计和部署方案
前端
codeGoogle34 分钟前
大厂研发之谜:千亿投入砸出利润大缩水
前端·人工智能·后端
菲兹园长1 小时前
CSS(展示效果)
前端·javascript·css