重生之我在学Vue-第8天-Vue-3-UI-框架Element-Plus
目录
重生之我在学Vue–第8天 Vue 3 UI 框架（Element Plus）
重生之我在学Vue–第8天 Vue 3 UI 框架（Element Plus）
前言
UI框架是提升开发效率和视觉统一性的利器，Element Plus作为Vue 3最流行的组件库之一，能让我们快速构建专业级界面。今日重点是在项目中集成Element Plus，并为任务管理系统注入现代化视觉体验。
Element Plus 官方文档 ：
Vue3 官方文档传送点 ：
Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习
Vue前端成仙之路：
GO后端成神之路：
一、Element Plus 基础：从安装到组件革命
1.1 安装与两种引入模式
npm install element-plus @element-plus/icons-vue全量引入（适合快速原型）
// main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App)
.use(ElementPlus)
.mount('#app')按需引入（推荐生产环境）
npm install -D unplugin-element-plus// vite.config.js
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
plugins: [
ElementPlus({
useSource: true
}),
]
})二、核心组件实战：重构任务管理系统
2.1 表格组件：专业数据展示
<template>
<el-table :data="taskStore.tasks" style="width: 100%">
<el-table-column prop="title" label="任务名称" width="180" />
<el-table-column label="状态">
<template #default="{ row }">
<el-tag :type="row.completed ? 'success' : 'info'">
{{ row.completed ? '已完成' : '进行中' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="{ row }">
<el-button type="danger" @click="handleDelete(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>2.2 表单组件：优雅数据录入
<template>
<el-form :model="newTask" label-width="80px">
<el-form-item label="任务名称">
<el-input v-model="newTask.title" />
</el-form-item>
<el-form-item label="优先级">
<el-select v-model="newTask.priority">
<el-option label="高" value="high" />
<el-option label="中" value="medium" />
<el-option label="低" value="low" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>2.3 反馈组件：增强交互体验
// 在Pinia action中使用消息提示
const deleteTask = async (id) => {
try {
await service.delete(`/tasks/${id}`)
ElMessage.success('删除成功')
this.fetchTasks()
} catch (error) {
ElMessage.error('删除失败')
}
}三、主题定制：打造品牌化视觉系统
3.1 SCSS变量覆盖
// styles/element.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
"base": #42b983,
)
)
);3.2 动态换肤方案
// 切换主题色
const changeTheme = (color) => {
const styles = document.documentElement.style
styles.setProperty('--el-color-primary', color)
}四、项目整合：UI升级全流程
4.1 改造前后对比图
原生HTML表格
Element Plus表格
基础输入框
表单验证组件
普通按钮
图标按钮组
4.2 性能优化建议
- 图标按需加载
：使用
unplugin-icons插件 - 组件懒加载 ：非首屏组件动态导入
- 主题包CDN引入 ：减少构建体积
总结与思考
设计系统思维 ：通过UI框架建立统一的视觉规范
平衡之道 ：在开发效率与包体积之间找到平衡点
扩展方向 ：
• 结合
@vueuse/core实现交互动效• 集成第三方图表库实现数据可视化
明日预告 ：Day9将进行项目整体整合，打造功能完备的任务管理系统！