当前位置：首页 > news >正文

vue使用Element Plus UI框架

news 2025/6/30 16:24:51

您好，舰长！非常棒的选择。功能是应用的骨架，而美观的 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>