How to use Vue3 and Element Plus to implement automatic import

1 Preface

1.1 Purpose

Element Plus uses on-demand introduction to greatly reduce the size of the packaged files

1.2 Final effect

Automatically generate the components.d.ts file, and introduce the Element Plus component into the file

##Automatically generate the components.d.ts file , and introduce Element Plus API in the file

##2 Preparation work

Install Element Plus

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

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

3 Import on demand

3.1 Install plug-ins

Components introduce required plug-ins on demand: unplugin-auto-import, unplugin-vue-components
icons Introduce the required plug-ins on demand: unplugin-auto-import, unplugin-icons

Only need to install to the development environment

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

3.2 Modify vite .config.ts file

4 Others

4.1 ELMessage pop-up style does not take effect

You need to manually import the corresponding style of ElMessage. If you only use the component API to cause the style failure problem, you can try the same processing method

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

4.2 Icon usage

Note, -ep - It is configured in the vite.config.ts file and must be consistent

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

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

The above is the detailed content of How to use Vue3 and Element Plus to implement automatic import. For more information, please follow other related articles on the PHP Chinese website!