02 整合ElementPlus

ElementPlus官方文档：https://element-plus.org/zh-CN/guide/installation.html

安装ElementPlus：

yarn add element-plus

安装ElementPlus的开发插件：

yarn add -D unplugin-vue-components unplugin-auto-import

在main.js中引入element plus：

import {createApp} from 'vue'

// 引入element plus

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import App from './App.vue'

const app = createApp(App)

// 使用element plus

app.use(ElementPlus)

app.mount('#app')

import {defineConfig} from 'vite'

import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig({

plugins: [

vue(),

// ElementPlus 自动导入插件

AutoImport({

resolvers: [ElementPlusResolver()],

}),

Components({

resolvers: [ElementPlusResolver()],

}),

],

})

修改App.vue，引入ElementPlus的按钮组件：

Default

Primary

Success

Info

Warning

Danger

此时再用浏览器访问：http://localhost:5173/