Element UI 完整使用实战示例

以下是 Element UI 的完整使用实战示例，涵盖从环境搭建、基础组件使用到项目实战的全流程，结合多个实际场景和代码示例：

---

一、环境搭建与基础配置

1. 安装 Element UI

通过 npm 或 yarn 安装：

npm install element-ui --save
# 或 yarn add element-ui

2. 全局引入与配置

在 main.js 中全局注册 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

3. 按需引入（优化性能）

安装 babel-plugin-component 插件：

npm install babel-plugin-component --save-dev

在 babel.config.js 中配置：

module.exports = {presets: ['@babel/preset-env'],plugins: [['component', {libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}]]
};

在 main.js 中按需引入组件：

import { Button, Select, Message } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(Button);
Vue.use(Select);
Vue.prototype.$message = Message; // 全局挂载消息组件

---

二、基础组件使用

1. 按钮与输入框

<template><div><el-button type="primary" @click="handleClick">点击我</el-button><el-input v-model="inputValue" placeholder="请输入内容"></el-input></div>
</template><script>
export default {data() {return {inputValue: ''};},methods: {handleClick() {this.$message.success('按钮被点击！');}}
};
</script>

2. 表单与验证

<template><el-form :model="form" :rules="rules" ref="form" label-width="100px"><el-form-item label="用户名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="form.password"></el-input></el-form-item><el-button type="primary" @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' }]}};},methods: {submitForm() {this.$refs.form.validate((valid) => {if (valid) {this.$message.success('提交成功！');} else {this.$message.error('请完善表单');}});}}
};
</script>

---

三、布局与容器组件

1. 响应式网格布局

<template><el-row><el-col :span="8" style="background-color: #f2f2f2;">侧边栏</el-col><el-col :span="16"><el-header>Header</el-header><el-main>Main Content</el-main></el-col></el-row>
</template>

2. 菜单与导航

<template><el-menu mode="vertical" :router="true" default-active="/"><el-menu-item index="/">首页</el-menu-item><el-submenu index="2"><template slot="title">用户管理</template><el-menu-item index="/user/list">用户列表</el-menu-item><el-menu-item index="/user/add">添加用户</el-menu-item></el-submenu></el-menu>
</template>

---

四、高级组件与功能

1. 对话框（Dialog）

<template><el-button @click="dialogVisible = true">打开对话框</el-button><el-dialog :visible.sync="dialogVisible" title="提示"><p>这是一个对话框</p><span slot="footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="confirm">确认</el-button></span></el-dialog>
</template><script>
export default {data() {return {dialogVisible: false};},methods: {confirm() {this.$message({ message: '操作成功', type: 'success' });this.dialogVisible = false;}}
};
</script>

2. 表格（Table）与数据操作

<template><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button><el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ date: '2023-05-01', name: '张三' },{ date: '2023-05-02', name: '李四' }]};},methods: {handleEdit(row) {this.$message.info('编辑操作');},handleDelete(row) {this.$confirm('确认删除?', '提示', { type: 'warning' }).then(() => {this.tableData = this.tableData.filter(item => item !== row);this.$message.success('删除成功');}).catch(() => {});}}
};
</script>

---

五、项目实战：待办事项管理系统

1. 项目结构

src/
├── components/
│   ├── TaskList.vue
│   ├── AddTask.vue
├── App.vue
├── main.js

2. 核心功能代码

App.vue

<template><div><el-input v-model="newTask" placeholder="添加新任务" @keyup.enter="addTask"></el-input><el-button type="primary" @click="addTask">添加</el-button><task-list :tasks="tasks" @deleteTask="removeTask"></task-list></div>
</template><script>
import TaskList from './components/TaskList.vue';export default {data() {return {newTask: '',tasks: []};},methods: {addTask() {if (this.newTask.trim()) {this.tasks.push(this.newTask);this.newTask = '';}},removeTask(task) {this.tasks = this.tasks.filter(t => t !== task);}},components: { TaskList }
};
</script>

TaskList.vue

<template><div><el-checkbox-group v-model="checkedTasks"><el-checkbox v-for="task in tasks" :label="task" :key="task">{{ task }}</el-checkbox></el-checkbox-group><el-button @click="removeAll">清除已完成任务</el-button></div>
</template><script>
export default {props: ['tasks'],data() {return {checkedTasks: []};},methods: {removeAll() {this.$emit('deleteTask', this.checkedTasks.join(','));}}
};
</script>

---

六、自定义主题与样式优化

1. 修改默认样式

在 src/styles/element-overrides.css 中覆盖默认样式：

.el-button--primary {background-color: #007aff;border-color: #007aff;
}

2. 自定义主题色

通过 SCSS 变量定制主题：

// src/styles/variables.scss
$--color-primary: #409EFF;
$--color-success: #67C23A;
@import "~element-ui/packages/theme-chalk/src/index.scss";

---

七、总结与注意事项

1. 按需引入 vs 全局引入

   • 小型项目可直接全局引入，大型项目建议按需加载以优化性能[³][⁵]。

2. 表单验证

   • 使用 rules 属性定义校验规则，结合 trigger 触发时机（如 blur 或 change）[¹][²]。

3. 组件通信

   • 通过 $emit 和 props 实现父子组件通信，复杂场景可使用 EventBus 或 Vuex[⁴]。

4. 移动端适配

   • 使用 el-col 的响应式属性（如 span 和 offset）实现布局适配[²]。

---

通过以上步骤，您可以快速上手 Element UI，构建高效的前端界面。如需更深入的功能（如权限控制、复杂表格操作），可参考官方文档[¹][⁴]。