首页
/ 正文

vue3 element-plus（超详细）

更新时间: 2025-03-17 22:13:25

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 作为一款轻量级框架，凭借其简洁的语法和高效的组件化特性，赢得了大量开发者青睐。而随着 Vue 3 的正式发布，其对 TypeScript 的深度支持、Composition API 的革新，以及性能的全面升级，进一步巩固了其地位。与此同时，Element Plus 作为 Vue 3 生态中最受欢迎的 UI 组件库之一，提供了丰富的交互组件和灵活的定制能力。本文将从 Vue3 Element Plus 的基础概念、核心功能、实战案例和优化技巧入手，帮助编程初学者和中级开发者快速掌握这一组合的核心价值。

安装与配置：搭建开发环境

1. 创建 Vue3 项目

使用 Vue CLI 快速初始化项目：

npm init vue@latest

在项目模板选择中，选择 Vue 3 和 TypeScript（可选），并按照提示完成配置。

2. 安装 Element Plus

通过 npm 或 yarn 安装：

npm install element-plus --save

或

yarn add element-plus

3. 全局注册组件

在 main.ts 中引入并注册 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');

4. 按需导入优化（可选）

若需减少打包体积，可结合 unplugin-element-plus 实现按需导入：

npm install unplugin-element-plus -D

在 vite.config.ts 中配置：

import { defineConfig } from 'vite';  
import vue from '@vitejs/plugin-vue';  
import ElementPlus from 'unplugin-element-plus/vite';  

export default defineConfig({  
  plugins: [  
    vue(),  
    ElementPlus()  
  ]  
});

基础组件使用：构建用户界面

1. 按钮与弹窗：交互的起点

Element Plus 的按钮组件 el-button 支持多种类型（primary、success、warning 等），并通过 @click 实现交互。例如：

<template>  
  <el-button type="primary" @click="handleClick">点击我</el-button>  
</template>  

<script setup>  
const handleClick = () => {  
  alert('按钮被点击了！');  
};  
</script>

2. 表单组件：数据收集的基石

表单组件 el-form 配合 el-input 和 el-select 可快速搭建表单：

<template>  
  <el-form :model="formData" label-width="120px">  
    <el-form-item label="用户名">  
      <el-input v-model="formData.username" />  
    </el-form-item>  
    <el-form-item label="性别">  
      <el-select v-model="formData.gender">  
        <el-option label="男" value="male" />  
        <el-option label="女" value="female" />  
      </el-select>  
    </el-form-item>  
  </el-form>  
</template>  

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

const formData = ref({  
  username: '',  
  gender: ''  
});  
</script>

3. 弹窗与提示：增强用户体验

el-dialog 可实现模态对话框，结合 v-model 控制显示状态：

<template>  
  <el-button @click="dialogVisible = true">打开对话框</el-button>  
  <el-dialog v-model="dialogVisible" title="提示">  
    <p>这是对话框内容</p>  
  </el-dialog>  
</template>  

<script setup>  
import { ref } from 'vue';  
const dialogVisible = ref(false);  
</script>

响应式设计与布局：灵活适配不同设备

1. Flex 布局：组件排列的“乐高积木”

Element Plus 的栅格系统 el-row 和 el-col 基于 Flexbox 实现，通过 gutter 控制间距：

<el-row :gutter="20">  
  <el-col :span="6">左侧区域</el-col>  
  <el-col :span="12">中间区域</el-col>  
  <el-col :span="6">右侧区域</el-col>  
</el-row>

2. 响应式断点：适配移动端

通过 xs、sm、md、lg、xl 等断点参数，动态调整布局：

<el-col :xs="24" :sm="12" :md="8" :lg="6">  
  这个组件在不同屏幕尺寸下会自动调整宽度  
</el-col>

进阶功能：自定义主题与插槽

1. 自定义主题：打造专属视觉风格

通过修改 element-plus/theme-chalk/index.css 的变量，可快速更换主题色：

@primary-color: #409EFF; /* 默认主色 */  
@primary-color-hover: #66b1ff;  

/* 在项目中引入自定义主题 */  
@import "~element-plus/theme-chalk/src/index.scss";

2. 插槽机制：扩展组件功能的“万能钥匙”

通过 slot 自定义组件内容，例如在 el-table 中添加操作按钮：

<el-table :data="tableData">  
  <el-table-column prop="name" label="姓名" />  
  <el-table-column label="操作">  
    <template #default="scope">  
      <el-button @click="handleEdit(scope.row)">编辑</el-button>  
    </template>  
  </el-table-column>  
</el-table>

实战案例：构建一个登录表单

1. 需求分析

实现一个包含用户名、密码、记住密码复选框和登录按钮的表单，并集成表单验证。

2. 实现代码

<template>  
  <el-form :model="form" :rules="rules" ref="loginForm" label-width="100px">  
    <el-form-item label="用户名" prop="username">  
      <el-input v-model="form.username" />  
    </el-form-item>  
    <el-form-item label="密码" prop="password">  
      <el-input type="password" v-model="form.password" />  
    </el-form-item>  
    <el-form-item>  
      <el-checkbox v-model="form.remember">记住密码</el-checkbox>  
    </el-form-item>  
    <el-form-item>  
      <el-button type="primary" @click="submitForm">登录</el-button>  
    </el-form-item>  
  </el-form>  
</template>  

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

const form = reactive({  
  username: '',  
  password: '',  
  remember: false  
});  

const rules = {  
  username: [  
    { required: true, message: '请输入用户名', trigger: 'blur' }  
  ],  
  password: [  
    { required: true, message: '请输入密码', trigger: 'blur' },  
    { min: 6, max: 20, message: '密码长度需在6-20位', trigger: 'blur' }  
  ]  
};  

const loginForm = ref<FormInstance>();  

const submitForm = () => {  
  loginForm.value?.validate((valid) => {  
    if (valid) {  
      alert('登录成功！');  
    } else {  
      alert('表单验证失败！');  
      return false;  
    }  
  });  
};  
</script>

性能优化：提升应用加载速度

1. 按需导入 vs 全局导入

通过表格对比两种方式的差异：

方案	优点	缺点
按需导入	减少打包体积	需额外配置插件
全局导入	配置简单	包含未使用的组件，体积较大

2. 懒加载与代码分割

通过 Suspense 和动态导入实现组件懒加载：

<template>  
  <el-button @click="toggle">切换组件</el-button>  
  <Suspense v-if="showComponent">  
    <template #default>  
      <LazyTargetComponent />  
    </template>  
    <template #fallback>  
      加载中...  
    </template>  
  </Suspense>  
</template>  

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

const showComponent = ref(false);  
const LazyTargetComponent = defineAsyncComponent(() => import('@/components/TargetComponent.vue'));  

const toggle = () => {  
  showComponent.value = !showComponent.value;  
};  
</script>

社区与生态：持续学习与实践

Element Plus 拥有活跃的开源社区和完善的文档，开发者可通过以下资源提升技能：

官方文档：https://element-plus.org/
GitHub 仓库：https://github.com/element-plus/element-plus
中文社区：Element Plus 中文文档

结论

通过本文的讲解，读者已掌握了 Vue3 Element Plus 的核心功能与实战技巧。从基础组件到响应式布局，再到性能优化与生态整合，这一组合为开发者提供了一站式的前端解决方案。建议读者通过实际项目持续练习，并关注社区动态以获取最新功能。记住，学习的关键在于“实践”——动手搭建一个完整的应用，才能真正理解技术的底层逻辑与应用场景。

未来，随着 Vue 3 的持续迭代和 Element Plus 的功能扩展，这一技术栈必将在企业级应用和复杂项目中发挥更大价值。现在就开始你的 Vue3 Element Plus 之旅吧！

vue3 element-plus（超详细）

前言

安装与配置：搭建开发环境

1. 创建 Vue3 项目

2. 安装 Element Plus

3. 全局注册组件

4. 按需导入优化（可选）

基础组件使用：构建用户界面

1. 按钮与弹窗：交互的起点

2. 表单组件：数据收集的基石

3. 弹窗与提示：增强用户体验

响应式设计与布局：灵活适配不同设备

1. Flex 布局：组件排列的“乐高积木”

2. 响应式断点：适配移动端

进阶功能：自定义主题与插槽

1. 自定义主题：打造专属视觉风格

2. 插槽机制：扩展组件功能的“万能钥匙”

实战案例：构建一个登录表单

1. 需求分析

2. 实现代码

性能优化：提升应用加载速度

1. 按需导入 vs 全局导入

2. 懒加载与代码分割

社区与生态：持续学习与实践

结论

最新发布

Vue3 app.config 属性（手把手讲解）

Vue3 app.config.errorHandler 属性（保姆级教程）

Vue3 app.config.warnHandler 属性（长文讲解）

Vue3 app.config.performance 属性（超详细）

Vue3 app.config.compilerOptions 属性（千字长文）

Vue3 app.config.globalProperties 属性（保姆级教程）

Vue3 app.config.optionMergeStrategies 属性（千字长文）

Vue3 app.config.idPrefix 属性（保姆级教程）

Vue3 app.config.throwUnhandledErrorInProduction 属性（保姆级教程）

Vue3 Vue.version 属性（一文讲透）