重生之我在学Vue--第8天 Vue 3 UI 框架（Element Plus）

重生之我在学Vue–第8天 Vue 3 UI 框架（Element Plus）

前言

UI框架是提升开发效率和视觉统一性的利器，Element Plus作为Vue 3最流行的组件库之一，能让我们快速构建专业级界面。今日重点是在项目中集成Element Plus，并为任务管理系统注入现代化视觉体验。

Element Plus 官方文档：组件 | Element Plus
Vue3 官方文档传送点： 简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

---

一、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 改造前后对比图

4.2 性能优化建议

1. 图标按需加载：使用unplugin-icons插件
2. 组件懒加载：非首屏组件动态导入
3. 主题包CDN引入：减少构建体积

---

总结与思考

1. 设计系统思维：通过UI框架建立统一的视觉规范
2. 平衡之道：在开发效率与包体积之间找到平衡点
3. 扩展方向：
   • 结合@vueuse/core实现交互动效
   • 集成第三方图表库实现数据可视化

明日预告：Day9将进行项目整体整合，打造功能完备的任务管理系统！