vue element（保姆级教程）

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

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

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

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

在现代 Web 前端开发领域，Vue.js 因其灵活性和高效性成为开发者青睐的框架之一。而 Vue Element（通常指 Element Plus）作为 Vue 生态中最流行的 UI 组件库，凭借丰富的组件和友好的文档，帮助开发者快速构建高质量的用户界面。无论是初学者搭建第一个项目，还是中级开发者优化复杂应用，掌握 Vue Element 的核心概念与实践技巧都至关重要。本文将从基础到进阶，结合案例与代码示例，逐步解析如何高效利用 Vue Element 提升开发效率。

一、什么是 Vue Element？

Vue Element 实际上是 Element Plus 的别称，它是基于 Vue 3 的新一代 UI 组件库，由饿了么前端团队维护。其核心价值在于提供了一套开箱即用的组件，如按钮、表格、表单、导航栏等，开发者无需从零设计样式和交互逻辑，只需通过配置和组合即可快速搭建页面。

形象比喻：
可以将 Element Plus 想象为一个“工具箱”，每个组件就像一个工具（例如螺丝刀、扳手）。开发者无需自己锻造工具，只需根据需求选择合适的工具，通过简单配置即可完成“组装”（页面构建）。

二、快速上手：环境搭建与基础组件使用

1. 安装与配置

安装 Element Plus 需通过 npm 或 yarn：

npm install element-plus --save  

在 Vue 项目入口文件（如 main.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).mount('#app');  

2. 基础组件示例：按钮与弹窗

以按钮（Button）和消息提示（Message）为例，展示如何快速使用组件：

<template>  
  <el-button @click="showMessage">点击显示消息</el-button>  
</template>  

<script>  
import { ElMessage } from 'element-plus';  

export default {  
  methods: {  
    showMessage() {  
      ElMessage.success('操作成功！');  
    }  
  }  
};  
</script>  

关键点解析：

• <el-button> 是 Element Plus 提供的按钮组件，通过 @click 绑定事件。
• ElMessage 是全局消息提示工具，通过导入并调用静态方法实现功能。

三、核心组件详解与配置技巧

1. 表单组件：实现复杂交互

表单是 Web 应用中最常见的场景之一。Element Plus 提供了 <el-form>、<el-input>、<el-select> 等组件，支持数据绑定与校验。

案例：带验证的登录表单

<template>  
  <el-form :model="form" :rules="rules" ref="formRef">  
    <el-form-item label="用户名" prop="username">  
      <el-input v-model="form.username" />  
    </el-form-item>  
    <el-form-item label="密码" prop="password">  
      <el-input v-model="form.password" type="password" />  
    </el-form-item>  
    <el-button @click="submitForm">提交</el-button>  
  </el-form>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      form: { username: '', password: '' },  
      rules: {  
        username: [  
          { required: true, message: '请输入用户名', trigger: 'blur' }  
        ],  
        password: [  
          { required: true, message: '请输入密码', trigger: 'blur' },  
          { min: 6, message: '密码长度至少6位', trigger: 'blur' }  
        ]  
      }  
    };  
  },  
  methods: {  
    submitForm() {  
      this.$refs.formRef.validate((valid) => {  
        if (valid) {  
          // 提交逻辑  
          console.log('表单验证通过');  
        } else {  
          console.log('表单验证失败');  
          return false;  
        }  
      });  
    }  
  }  
};  
</script>  

技巧：

• el-form 的 :model 和 :rules 属性分别绑定数据与验证规则。
• el-form-item 的 prop 属性需与 form 中字段名一致，以便关联验证规则。

2. 表格组件：动态数据与分页

表格（<el-table>）是展示结构化数据的核心组件。以下案例演示如何动态渲染数据并实现分页：

案例：带分页的用户列表

<template>  
  <el-table :data="users" stripe>  
    <el-table-column prop="id" label="ID" width="80" />  
    <el-table-column prop="name" label="姓名" />  
    <el-table-column prop="email" label="邮箱" />  
    <el-table-column label="操作">  
      <template #default="scope">  
        <el-button @click="deleteUser(scope.row)">删除</el-button>  
      </template>  
    </el-table-column>  
  </el-table>  

  <el-pagination  
    :current-page="currentPage"  
    :page-size="pageSize"  
    :total="totalUsers"  
    @update:current-page="handlePageChange"  
  />  
</template>  

<script>  
export default {  
  data() {  
    return {  
      users: [],  
      currentPage: 1,  
      pageSize: 10,  
      totalUsers: 100  
    };  
  },  
  methods: {  
    handlePageChange(page) {  
      this.currentPage = page;  
      // 此处可发起分页数据请求  
    },  
    deleteUser(user) {  
      // 实现删除逻辑  
      this.users = this.users.filter(u => u.id !== user.id);  
    }  
  }  
};  
</script>  

关键点：

• el-table-column 的 prop 属性对应数据对象的字段名。
• 通过作用域插槽（#default="scope"）访问当前行数据，实现动态操作按钮。

四、进阶技巧：自定义与性能优化

1. 自定义主题与样式覆盖

Element Plus 支持通过 Sass 变量自定义主题颜色和样式。例如，在项目中创建 element-variables.scss：

@import "~element-plus/packages/theme-chalk/src/index.scss";  

:$--color-primary: #409EFF; // 修改主色为蓝色  
:$--font-size-base: 14px; // 修改基础字体大小  

body {  
  @include el-reset;  
}  

然后在入口文件中引入此文件：

import './element-variables.scss';  

2. 懒加载与按需引入

对于大型项目，按需引入可减少打包体积。通过 unplugin-vue-components 和 element-plus/es 实现：

npm install unplugin-vue-components -D  

在 vite.config.js 中配置：

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

export default defineConfig({  
  plugins: [  
    Components({  
      dirs: ['src/components'],  
      extensions: ['vue', 'js'],  
      deep: true,  
      globalComponents: ['ElButton', 'ElMessage'] // 全局引入常用组件  
    })  
  ]  
});  

五、实战案例：构建一个完整的 CRUD 界面

1. 需求分析

假设需要实现一个用户管理界面，包含：

• 表格展示用户数据
• 新增、编辑、删除操作
• 搜索与分页

2. 完整代码示例

<template>  
  <div class="user-management">  
    <!-- 搜索栏 -->  
    <el-input v-model="search" placeholder="搜索用户名" style="width: 200px; margin: 10px 0;" />  

    <!-- 表格 -->  
    <el-table :data="filteredUsers" stripe>  
      <el-table-column prop="id" label="ID" width="80" />  
      <el-table-column prop="name" label="姓名" />  
      <el-table-column prop="email" label="邮箱" />  
      <el-table-column label="操作">  
        <template #default="scope">  
          <el-button @click="handleEdit(scope.row)">编辑</el-button>  
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>  
        </template>  
      </el-table-column>  
    </el-table>  

    <!-- 分页 -->  
    <el-pagination  
      :current-page="currentPage"  
      :page-size="pageSize"  
      :total="filteredUsers.length"  
      @update:current-page="handlePageChange"  
      style="margin-top: 20px;"  
    />  

    <!-- 新增/编辑对话框 -->  
    <el-dialog :title="dialogTitle" v-model="dialogVisible">  
      <el-form :model="currentUser" :rules="rules" ref="dialogFormRef">  
        <el-form-item label="姓名" prop="name">  
          <el-input v-model="currentUser.name" />  
        </el-form-item>  
        <el-form-item label="邮箱" prop="email">  
          <el-input v-model="currentUser.email" />  
        </el-form-item>  
      </el-form>  
      <template #footer>  
        <el-button @click="dialogVisible = false">取消</el-button>  
        <el-button type="primary" @click="submitForm">确认</el-button>  
      </template>  
    </el-dialog>  
  </div>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      users: [  
        { id: 1, name: '张三', email: 'zhangsan@example.com' },  
        { id: 2, name: '李四', email: 'lisi@example.com' }  
      ],  
      search: '',  
      currentPage: 1,  
      pageSize: 5,  
      dialogVisible: false,  
      currentUser: { id: 0, name: '', email: '' },  
      rules: {  
        name: [{ required: true, message: '请输入姓名' }],  
        email: [  
          { required: true, message: '请输入邮箱' },  
          { type: 'email', message: '邮箱格式错误' }  
        ]  
      }  
    };  
  },  
  computed: {  
    filteredUsers() {  
      return this.users.filter(user =>  
        user.name.includes(this.search)  
      );  
    }  
  },  
  methods: {  
    handlePageChange(page) {  
      this.currentPage = page;  
    },  
    handleEdit(user) {  
      this.currentUser = { ...user };  
      this.dialogVisible = true;  
    },  
    handleDelete(user) {  
      this.$confirm('确定删除该用户?', '提示', {  
        confirmButtonText: '确定',  
        cancelButtonText: '取消',  
        type: 'warning'  
      }).then(() => {  
        this.users = this.users.filter(u => u.id !== user.id);  
        ElMessage.success('删除成功');  
      });  
    },  
    submitForm() {  
      this.$refs.dialogFormRef.validate(valid => {  
        if (valid) {  
          if (this.currentUser.id === 0) {  
            // 新增逻辑  
            this.currentUser.id = this.users.length + 1;  
            this.users.push(this.currentUser);  
          } else {  
            // 编辑逻辑  
            const index = this.users.findIndex(u => u.id === this.currentUser.id);  
            this.users.splice(index, 1, this.currentUser);  
          }  
          this.dialogVisible = false;  
          ElMessage.success('操作成功');  
        }  
      });  
    }  
  }  
};  
</script>  

<style scoped>  
.user-management {  
  padding: 20px;  
}  
</style>  

六、结论

通过本文的讲解，读者应已掌握 Vue Element 的核心概念、组件使用方法以及进阶技巧。无论是构建简单的表单，还是复杂的 CRUD 界面，Element Plus 的丰富组件和灵活配置都能显著提升开发效率。

关键总结：

1. 快速上手：通过安装与基础组件实践，开发者可快速搭建界面。
2. 深入理解：掌握表单验证、分页、动态数据绑定等核心功能的实现逻辑。
3. 优化与扩展：通过主题自定义、按需引入等技巧，应对大型项目需求。

Vue Element 的生命力不仅在于其组件库本身，更在于其活跃的社区与持续迭代的特性。建议读者通过官方文档和开源项目进一步探索，将理论转化为实践，最终实现高效、优雅的前端开发。