So implementieren Sie den automatischen Import mit Vue3 und Element Plus

Nr Verpackung Die endgültige Dateigröße

1.2 Endeffekt

Generieren Sie automatisch die Datei „components.d.ts“ und fügen Sie die Element Plus-Komponente in die Datei ein

#🎜 🎜#

Automatisch die Datei „components.d.ts“ generieren und die Element Plus-API in die Datei einführen

2 Vorbereitung

Element Plus installieren

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

3 Bei Bedarf einführen

3.1 Plugin installieren

#🎜🎜 #Komponenten führen erforderliche Plug-Ins bei Bedarf ein: unplugin-auto-import, unplugin-vue-components

Symbole führen erforderliche Plug-Ins bei Bedarf ein: unplugin-auto- Import, Unplugin-Icons

Sie müssen es nur in der Entwicklungsumgebung installieren

• $ pnpm i unplugin-auto-import unplugin-vue-components unplugin-icons -D

  3.2 Ändern Sie die vite.config.ts-Datei
4 Andere

4.1 ELMessage-Popup-Stil ist nicht effektiv

# 🎜🎜#

# 🎜🎜#

Sie müssen den entsprechenden ElMessage-Stil manuell importieren und die Komponenten-API nur verwenden, um Probleme mit Stilfehlern zu verursachen. Sie können die gleiche Behandlungsmethode ausprobieren#🎜 🎜#

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

4.2 Symbolverwendung#🎜 🎜#

Beachten Sie, dass -ep- in der Datei vite.config.ts konfiguriert ist und konsistent sein muss

# 🎜🎜#

<!-- 直接使用 -->
<i-ep-menu />

<!-- 嵌套使用 -->
<el-icon><i-ep-menu /></el-icon>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den automatischen Import mit Vue3 und Element Plus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!