element-plus的按需导入、icon导入前言大家好，我是前端小喵代码地址 gitee.com/sx-miao

前言

大家好，我是前端小喵

代码地址

实现思路

一、按需导入组件

官方链接：element-plus.gitee.io/zh-CN/guide…

1、安装插件

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

2、vite配置

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'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

二、导入icons

第一种：注册所有图标(线上项目用的）

官方链接：element-plus.gitee.io/zh-CN/compo…

1、安装依赖

    npm install @element-plus/icons-vue
    yarn add @element-plus/icons-vue

2、main.js注册所有图标

    import * as ElementPlusIconsVue from '@element-plus/icons-vue'

    const app = createApp(App)
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
    }

第二种：按需引入icon

看了一些文章（unplugin-icons的实现），自己也实践了一下还是有循环引入动态图标的问题