平台与网站有什么区别,怎么实现网站建设报价方案,什么样的网站好优化,做网站需要的注意事项您好#xff0c;舰长#xff01;非常棒的选择。功能是应用的骨架#xff0c;而美观的 UI 则是应用的灵魂和血肉。是时候为我们的飞船进行一次全面的“外观升级”和“内饰装修”了。
我们将集成一个在业界非常流行、功能强大的 Vue 3 组件库——Element Plus。它将帮助我们快…您好舰长非常棒的选择。功能是应用的骨架而美观的 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.cssimport App from ./App.vue
import router from ./router
import ./assets/main.cssconst 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.vuescript setup langts
import { ref } from vue
import { Plus } from element-plus/icons-vue // 导入一个图标
import TodoItem from ../components/TodoItem.vue
import { useTodoStore } from ../stores/todoStoreconst todoStore useTodoStore()
const newTodoText ref()function addNewTodo() {todoStore.addTodo(newTodoText.value)newTodoText.value
}
/scripttemplatemainh1我的待办事项 (还剩 {{ todoStore.incompleteCount }} 项未完成)/h1div classadd-formel-input v-modelnewTodoText placeholder接下来要做什么 sizelargeclearablekeyup.enteraddNewTodo/el-button typeprimary sizelarge :iconPlusclickaddNewTodo添加/el-button/divulTodoItem v-fortodo in todoStore.todos :keytodo.id:todotodoremovetodoStore.removeTodo(todo.id)toggle-completetodoStore.toggleTodoComplete(todo.id)//ul/main
/templatestyle scoped
/* 我们可以为新表单添加一点样式 */
.add-form {display: flex;gap: 10px; /* 元素间的间距 */margin-bottom: 20px;
}main { /* ... 其他样式保持不变 ... */ }
ul { /* ... 其他样式保持不变 ... */ }
/style2. 重构 TodoItem.vue (待办事项)
我们将把 li 换成更好看的 el-card把复选框和按钮也一并替换。
打开 src/components/TodoItem.vue用下面的代码完整替换它的全部内容
// src/components/TodoItem.vuescript setup langts
import { RouterLink } from vue-router
// 导入需要的图标
import { Delete } from element-plus/icons-vuedefineProps{todo: {id: number;text: string;completed: boolean;}
}()const emit defineEmits([remove, toggle-complete])
/scripttemplateel-card classtodo-item :class{ completed: todo.completed }div classtodo-contentel-checkbox :model-valuetodo.completedchangeemit(toggle-complete)sizelarge/RouterLink :to/todo/${todo.id} classtodo-textspan{{ todo.text }}/span/RouterLink/divel-button typedanger :iconDelete circle clickemit(remove)//el-card
/templatestyle 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)。它能让我们的代码库变得更加整洁、优雅和易于维护。
准备好后我们就可以出发学习如何打造我们自己的“逻辑工具箱”
