vue使用Element Plus UI框架

您好，舰长！非常棒的选择。功能是应用的骨架，而美观的 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 中进行全局注册和样式引入。

1. 打开 src/main.ts 文件。
2. 导入 Element Plus 的主模块和 CSS 文件，并用 app.use() 来安装它。

用下面的代码完整替换 src/main.ts 的内容：

// src/main.ts

import { 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)。它能让我们的代码库变得更加整洁、优雅和易于维护。

准备好后，我们就可以出发，学习如何打造我们自己的“逻辑工具箱”！