Vue—— Vue3 之 Element Plus 组件库集成与定制

背景问题：
需要快速构建 UI 界面，提高开发效率。

方案思考：
集成 Element Plus 组件库并进行主题定制。

具体实现：

// main.jsimport{createApp}from'vue'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'// 按需引入主题importzhCnfrom'element-plus/es/locale/lang/zh-cn'constapp=createApp(App)// 全局配置 Element Plusapp.use(ElementPlus,{locale:zhCn,size:'default'// 'large', 'default', 'small'})

按需引入组件的完整示例：

// plugins/element-plus.jsimport{ElButton,ElMessage,ElMessageBox,ElNotification,ElInput,ElForm,ElFormItem}from'element-plus'constcomponents=[ElButton,ElInput,ElForm,ElFormItem]constplugins=[ElMessage,ElMessageBox,ElNotification]exportdefaultfunctionloadElementPlus(app){// 注册组件components.forEach(component=>{app.component(component.name,component)})// 注册插件plugins.forEach(plugin=>{app.config.globalProperties[`$${plugin.name}`]=plugin})}

// main.jsimport{createApp}from'vue'importAppfrom'./App.vue'importloadElementPlusfrom'@/plugins/element-plus'constapp=createApp(App)loadElementPlus(app)app.mount('#app')

主题定制示例：

// styles/element-variables.scss // 可以在这里覆盖 Element Plus 的 CSS 变量 :root { --el-color-primary: #1890ff; --el-color-success: #52c41a; --el-color-warning: #faad14; --el-color-danger: #f5222d; --el-color-info: #909399; // 字体大小 --el-font-size-base: 14px; --el-border-radius-base: 4px; }

使用组件的示例：

<template> <div class="element-demo"> <el-space> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> <el-button type="info">信息按钮</el-button> </el-space> <el-form :model="form" :rules="rules" ref="formRef" style="margin-top: 20px;"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username" placeholder="请输入用户名" /> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email" placeholder="请输入邮箱" /> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </div> </template> <script setup> import { ref, reactive } from 'vue' const formRef = ref() const form = reactive({ username: '', email: '' }) const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' } ], email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ] } const submitForm = () => { formRef.value.validate((valid) => { if (valid) { console.log('提交表单:', form) } else { console.log('验证失败!') return false } }) } const resetForm = () => { formRef.value.resetFields() } </script>