vue3 elementui（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在前端开发领域，Vue.js 凭借其简洁的语法和灵活的生态，成为众多开发者青睐的框架。随着 Vue3 的发布，其引入的 Composition API 和响应式系统的升级，进一步提升了开发效率与代码可维护性。而 Element Plus（Element UI 的 Vue3 版本）作为一款功能丰富的 UI 组件库，与 Vue3 的结合，为开发者提供了一站式构建现代化 Web 应用的解决方案。本文将从基础到进阶，分步骤讲解如何利用 Vue3 和 Element Plus 开发高效、美观的应用程序，并通过实际案例帮助读者掌握关键知识点。

环境搭建与项目初始化

1. 安装 Vue3 和 Element Plus

要开始开发，首先需要创建一个 Vue3 项目，并集成 Element Plus。以下是完整的安装步骤：

vue create my-project  
cd my-project  

npm install element-plus --save  

2. 引入 Element Plus

在项目入口文件 main.js 中，全局引入 Element Plus 的组件和样式：

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');

比喻：这一步就像在空房间里摆放家具，Element Plus 提供了现成的“家具”（组件），而 app.use() 则是将这些家具安装到位。

基础组件使用与响应式数据绑定

1. 常用组件示例

Element Plus 包含按钮、弹窗、表单等核心组件。以下是一个简单的按钮和弹窗组合示例：

<template>
  <el-button @click="showDialog = true">点击打开弹窗</el-button>
  <el-dialog v-model="showDialog" title="提示">
    <p>这是弹窗内容</p>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';

const showDialog = ref(false);
</script>

知识点解析：

• v-model 实现了双向数据绑定，showDialog 的值变化会直接影响弹窗的显示状态。
• @click 是 Vue 的事件绑定语法，点击按钮时会触发 showDialog 的值反转。

2. 响应式系统与 Composition API

Vue3 的响应式系统基于 Proxy 对象，开发者可通过 ref 和 reactive 创建响应式数据。例如：

<script setup>
import { ref } from 'vue';

// 使用 ref 定义基本类型响应式数据
const count = ref(0);

// 使用 reactive 定义对象类型响应式数据
const user = reactive({
  name: '张三',
  age: 25
});
</script>

比喻：ref 和 reactive 像是两面“智能镜子”，它们会自动感知数据变化并更新视图，而无需手动通知。

表单组件与校验逻辑

1. 表单组件基础用法

Element Plus 的 el-form 和 el-form-item 可快速构建表单。以下是一个带输入框和提交按钮的示例：

<template>
  <el-form :model="formData" :rules="rules" ref="formRef">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="formData.email" />
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

const formData = reactive({
  username: '',
  email: ''
});

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式错误', trigger: 'change' }
  ]
};

const formRef = ref();

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功！');
    }
  });
};
</script>

关键点：

• :model 绑定表单数据对象，prop 指定校验字段。
• el-form 的 ref 用于触发校验方法 validate()。
• ElMessage 是 Element Plus 提供的全局消息提示组件。

2. 自定义校验规则

若需更复杂的校验逻辑，可通过 validator 函数实现：

const rules = {
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码长度不得少于6位'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};

进阶功能：路由集成与组件复用

1. 与 Vue Router 的结合

假设项目需要导航功能，可通过以下步骤集成 Vue Router：

npm install vue-router@next --save

在 main.js 中配置路由：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

const app = createApp(App);
app.use(router);

在模板中使用 <router-link> 或 <router-view>：

<template>
  <el-menu mode="horizontal">
    <el-menu-item index="1">
      <router-link to="/">首页</router-link>
    </el-menu-item>
    <el-menu-item index="2">
      <router-link to="/about">关于</router-link>
    </el-menu-item>
  </el-menu>
  <router-view />
</template>

2. 组件复用与插槽技术

Element Plus 的组件支持插槽（Slots），允许自定义内容。例如，自定义弹窗的底部按钮：

<el-dialog v-model="showDialog" title="自定义内容">
  <p>这是弹窗内容</p>
  <template #footer>
    <el-button @click="showDialog = false">取消</el-button>
    <el-button type="primary" @click="confirmAction">确定</el-button>
  </template>
</el-dialog>

性能优化与最佳实践

1. 按需加载组件

若项目中仅使用少量 Element Plus 组件，可通过 unplugin-vue-components 实现按需导入，减少打包体积：

npm install unplugin-vue-components --save-dev

在 vite.config.js 中配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/rollup';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      extensions: ['vue'],
      dirs: ['src/components'],
      deep: true,
      globalComponents: ['ElButton', 'ElDialog'] // 指定全局组件
    })
  ]
});

2. 避免过度渲染

对于复杂组件，可使用 v-if 替代 v-show，或通过 keep-alive 缓存组件状态：

<template>
  <keep-alive>
    <component :is="currentComponent" />
  </keep-alive>
</template>

结论

通过本文的讲解，读者应已掌握 Vue3 与 Element Plus 的基础用法、表单校验、路由集成等核心功能，并了解如何通过组件复用和性能优化提升开发效率。Vue3 的 Composition API 和 Element Plus 的丰富组件生态，为开发者提供了高效开发的基石。未来，随着 Vue 生态的持续演进，结合 TypeScript 和更多高级特性（如自定义指令、全局状态管理），开发者可构建出更加复杂和健壮的 Web 应用。

实践建议：

1. 从简单页面开始，逐步尝试复杂功能。
2. 参考 Element Plus 官方文档，探索更多组件与配置选项。
3. 结合实际项目需求，优化代码结构并实践测试驱动开发（TDD）。

通过持续学习和实践，您将能够充分利用 Vue3 和 Element Plus 的优势，快速构建出高质量的前端应用。