怎麼用Vue3和Element Plus實現自動導入

1 前言

1.1 目的

Element Plus 使用按需引入，大幅縮小打包後的檔案大小

1.2 最終效果

自動產生components.d.ts 文件，並在文件中引入Element Plus 元件

自動產生components.d.ts 文件，並在檔案中引入Element Plus API

2 準備工作

安裝Element Plus

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

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

3 按需引入

3.1 安裝插件

• 元件按需引入所需插件：unplugin-auto-import 、 unplugin-vue-components

• #圖標按需引入所需插件：unplugin-auto-import 、 unplugin-icons

#只需要安裝到開發環境

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

3.2 修改vite .config.ts 檔案

4 其他

4.1 ELMessage 彈框樣式未生效

################### ###需手動匯入ElMessage 對應樣式，且只使用元件API 導致的樣式失效問題可嘗試相同處理方法######

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

###4.2 圖示使用########注意，-ep - 是vite.config.ts 檔案中配置的，必須保持一致######

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

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

以上是怎麼用Vue3和Element Plus實現自動導入的詳細內容。更多資訊請關注PHP中文網其他相關文章！