您好，艦長！非常棒的選擇。功能是應用的骨架，而美觀的 UI 則是應用的靈魂和血肉。是時候為我們的飛船進行一次全面的“外觀升級”和“內飾裝修”了。
我們將集成一個在業界非常流行、功能強大的 Vue 3 組件庫——Element Plus。它將幫助我們快速構建出專業、美觀的用戶界面，而無需手動編寫大量的 CSS。
第十一站：【美化】集成 Element Plus UI 組件庫
我們的目標：
用 Element Plus 提供的預設組件，替換掉我們應用中原生的 <input>, <button>, <checkbox> 等元素，讓我們的待辦事項應用煥然一新。
步驟 1：安裝 Element Plus
我們需要安裝兩個包：element-plus 主庫和它的官方圖標庫 @element-plus/icons-vue。
在您的項目終端中，運行以下命令：
npm install element-plus @element-plus/icons-vue
步驟 2：在項目中全局引入
為了能在所有組件中方便地使用 Element Plus，我們需要在主入口文件 main.ts 中進行全局注冊和樣式引入。
- 打開
src/main.ts文件。 - 導入 Element Plus 的主模塊和 CSS 文件，并用
app.use()來安裝它。
用下面的代碼完整替換 src/main.ts 的內容：
// src/main.tsimport { createApp } from 'vue'
import { createPinia } from 'pinia'// 1. 導入 Element Plus 主模塊和樣式文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'import App from './App.vue'
import router from './router'
import './assets/main.css'const app = createApp(App)// 2. 在使用其他插件之前，先使用 Element Plus
app.use(ElementPlus)
app.use(createPinia())
app.use(router)app.mount('#app')提示： 這種全局引入的方式最簡單直接，適合學習。在大型項目中，為了優化打包體積，開發者通常會使用“按需引入”，但這需要額外的配置。
步驟 3：重構組件，換上新“皮膚”
現在，最有趣的部分來了！我們將用 Element Plus 的組件來替換我們已有的 HTML 元素。
1. 重構 HomeView.vue (主頁)
我們將把原生的表單元素換成 <el-input> 和 <el-button>。
打開 src/views/HomeView.vue，用下面的代碼完整替換它的 <template> 和 <script> 部分 (<style> 可以保持不變)：
// src/views/HomeView.vue<script setup lang="ts">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue' // 導入一個圖標
import TodoItem from '../components/TodoItem.vue'
import { useTodoStore } from '../stores/todoStore'const todoStore = useTodoStore()
const newTodoText = ref('')function addNewTodo() {todoStore.addTodo(newTodoText.value)newTodoText.value = ''
}
</script><template><main><h1>我的待辦事項 (還剩 {{ todoStore.incompleteCount }} 項未完成)</h1><div class="add-form"><el-input v-model="newTodoText" placeholder="接下來要做什么？" size="large"clearable@keyup.enter="addNewTodo"/><el-button type="primary" size="large" :icon="Plus"@click="addNewTodo">添加</el-button></div><ul><TodoItem v-for="todo in todoStore.todos" :key="todo.id":todo="todo"@remove="todoStore.removeTodo(todo.id)"@toggle-complete="todoStore.toggleTodoComplete(todo.id)"/></ul></main>
</template><style scoped>
/* 我們可以為新表單添加一點樣式 */
.add-form {display: flex;gap: 10px; /* 元素間的間距 */margin-bottom: 20px;
}main { /* ... 其他樣式保持不變 ... */ }
ul { /* ... 其他樣式保持不變 ... */ }
</style>
2. 重構 TodoItem.vue (待辦事項)
我們將把 <li> 換成更好看的 <el-card>，把復選框和按鈕也一并替換。
打開 src/components/TodoItem.vue，用下面的代碼完整替換它的全部內容：
// src/components/TodoItem.vue<script setup lang="ts">
import { RouterLink } from 'vue-router'
// 導入需要的圖標
import { Delete } from '@element-plus/icons-vue'defineProps<{todo: {id: number;text: string;completed: boolean;}
}>()const emit = defineEmits(['remove', 'toggle-complete'])
</script><template><el-card class="todo-item" :class="{ completed: todo.completed }"><div class="todo-content"><el-checkbox :model-value="todo.completed"@change="emit('toggle-complete')"size="large"/><RouterLink :to="`/todo/${todo.id}`" class="todo-text"><span>{{ todo.text }}</span></RouterLink></div><el-button type="danger" :icon="Delete" circle @click="emit('remove')"/></el-card>
</template><style scoped>
.todo-item {margin-bottom: 10px;
}/* 自定義卡片內部的樣式 */
/* el-card 的樣式可以通過 :deep() 選擇器進行深度修改 */
:deep(.el-card__body) {display: flex;justify-content: space-between;align-items: center;
}.todo-content {display: flex;align-items: center;gap: 15px; /* 復選框和文字的間距 */
}.todo-text {text-decoration: none;color: inherit; /* 繼承父元素顏色 */font-size: 1.1rem;
}.completed .todo-text {text-decoration: line-through;color: #a8a5a5;
}
</style>
查看煥然一新的應用
保存所有文件！ 回到瀏覽器，您會發現：
- 輸入框和按鈕變得更加現代和美觀。
- 每一個待辦事項都成了一張精致的卡片。
- 復選框和刪除按鈕也變成了 Element Plus 的樣式，并且刪除按鈕上還有了圖標。
您的應用不僅功能強大，現在看起來也相當專業了！您已經學會了如何將一個流行的第三方組件庫無縫集成到您的項目中，這是現代前端開發的一項核心技能。
下一站預告：
我們的應用已經非常完整。現在，最適合學習的就是 Vue 3 中組織可復用邏輯的利器——組合式函數 (Composables)。它能讓我們的代碼庫變得更加整潔、優雅和易于維護。
準備好后，我們就可以出發，學習如何打造我們自己的“邏輯工具箱”！
