以下是 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，構建高效的前端界面。如需更深入的功能（如權限控制、復雜表格操作），可參考官方文檔[¹][⁴]。