使用 Element Plus

Element Plus 介绍

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3 的桌面端组件库。被广泛地应用于基于 Vue 的前端开发。
官网 : https://element-plus.gitee.io/zh-CN/

在 Vite 环境下部署 Element

1. 安装 Element Plus

npm install element-plus --save

2. 配置组件自动导入

安装组件自动加载插件 :

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

配置自动加载

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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

测试组件，打开 app.vue 使用 el-button 组件 :

<el-button>Submit</el-button>