vue3+vite 完整与按需引入element-plus一、完整引入安装：npm i element-plus --

一、完整引入

安装：npm i element-plus --save
优点：使用和配置方便
缺点：项目打包时体积大
步骤：main.js 中添加以下内容

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

二、按需引入

安装：npm i element-plus --save
安装插件：npm install -D unplugin-vue-components unplugin-auto-import
优点：按需引入打包体积小
缺点：配置繁琐，使用不方便
步骤：

在 vite.config.ts 中添加配置

// vite.config.ts
import { defineConfig } from 'vite'
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(),
    	// 按需引入组件的样式
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
})

src \ plugins \ element-plus.ts 配置按需引入组件

import { ElButton, ElDialog } from "element-plus";
// 引入类型，加上 type
import type { App } from "vue"

const setupElementPlus = (app: App) => {
    app.use(ElButton)
    app.use(ElDialog)
}

export default setupElementPlus

main.ts 导入该配置

import setupElementPlus from './plugins/element-plus'
const app = createApp(App)
// 传入 app
setupElementPlus(app)

App.vue 测试

<el-button type="primary" :icon="Plus" @click="test">经典按钮</el-button>
<script lang="ts" setup>
import { Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
// 如果只是用组件 API，您需要手动导入样式
import "element-plus/es/components/message/style/css";

const test = () => {
    ElMessage.success("登陆成功");
};
</script>