(vue3)vite+TS+element-plus icône icône méthode d'implémentation d'importation automatique

Cadre du projet : vite+TS (vue3)

1. Installez element-plus

npm install element-plus --save
# 或者  简写
npm i element-plus -S

L'environnement en ligne doit utiliser element-plus, donc '-S', installez element-plus et enregistrez les informations de dépendance du projet sous "dépendances" de "package.json".

2. Installez la bibliothèque d'icônes d'icônes

npm install @element-plus/icons-vue -S

3.安装 déconnecter les icônes, déconnecter l'importation automatique

npm install -D unplugin-icons unplugin-auto-import

"-D" signifie installer et enregistrer les informations du package dépendant sous "devDependencies" de package.json. Ces deux packages sont automatiquement importés par l'icône d'aide. Ils sont utilisés dans l'environnement de développement et ne sont pas nécessaires dans l'environnement de production, donc " -D" c'est bien.

4. Ajouter la configuration "vite.config.ts"

// 导入包
import AutoImport from 'unplugin-auto-import/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
    
    
  // 添加自动导入配置
  plugins: [
    AutoImport({
    
    
      resolvers: [
        // 自动导入图标组件
        IconsResolver({
    
    
          prefix: 'Icon',
        }),
      ],
    }),
    Components({
    
    
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
    
    
          enabledCollections: ['ep'],
        }),
      ],
    }),
    Icons({
    
    
      autoInstall: true,
    }),
  ],
 })

comme le montre l'image:

5. Comment utiliser

Trouvez l'icône à utiliser sur le site officiel d'element-plus, ajoutez le préfixe "i-ep-" avant le nom de l'icône sur le site officiel, et vous pourrez utiliser l'icône directement : Modèle
:

<i-ep-图标名 />

ou:

<el-icon><i-ep-图标名 /></el-icon>

Exemple:

<i-ep-document />

Pour plus de connaissances sur le fonctionnement, veuillez vous référer à la documentation officielle du site :
https://element-plus.gitee.io/zh-CN/component/icon.html