vue3+vite 项目中怎么引入 elementplus 组件库

追光的栗子2025-07-19 17:30

一：完整引入

安装：npm i element-plus --save
步骤：main.js 中添加以下内容

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 中添加配置

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 配置按需引入组件

js 复制代码

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 导入该配置

js 复制代码

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

App.vue 测试

js 复制代码

<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>