以下是 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";
七、总结与注意事项
按需引入 vs 全局引入
- 小型项目可直接全局引入，大型项目建议按需加载以优化性能[3][5]。
表单验证
- 使用
rules属性定义校验规则，结合trigger触发时机（如blur或change）[1][2]。
- 使用
组件通信
- 通过
$emit和props实现父子组件通信，复杂场景可使用EventBus或Vuex[4]。
- 通过
移动端适配
- 使用
el-col的响应式属性（如span和offset）实现布局适配[2]。
- 使用
通过以上步骤，您可以快速上手 Element UI，构建高效的前端界面。如需更深入的功能（如权限控制、复杂表格操作），可参考官方文档[1][4]。