项目源码-Vue3项目06-整合ElementPlus

Last Updated on 2025年1月8日 by hangzi

整合Element-Plus

1、安装依赖

pnpm add element-plus

2、vite配置Element-Plus相关配置

vite.config.js配置内容：

import {defineConfig} from "vite"
import vue from "@vitejs/plugin-vue"
import {fileURLToPath, URL} from "url";
import {resolve} from "path";

const pathSrc = resolve(__dirname, "src");

import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ["vue", "vue-router"],
            resolvers: [
                // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
                ElementPlusResolver(),
            ],
            // 指定自动导入函数TS类型声明文件路径
            dts: resolve(pathSrc,"types","auto-imports.d.ts"),
        }),
        Components({
            resolvers: [
                // 自动导入 Element Plus 组件
                ElementPlusResolver(),
            ],
            // 指定自动导入函数TS类型声明文件路径
            dts: resolve(pathSrc,"types","components.d.ts"),
        }),

    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

3、使用Element-Plus

在src/components/HelloWorld.vue组件下加入一组按钮

<div>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
</div>

4、运行项目效果

项目Demo源码：https://github.com/hangzhi7/Vue3-Demo