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

文章目录

[重生之我在学Vue--第8天 Vue 3 UI 框架（Element Plus）](#重生之我在学Vue--第8天 Vue 3 UI 框架（Element Plus）)
- 前言
- [一、Element Plus 基础：从安装到组件革命](#一、Element Plus 基础：从安装到组件革命)
- - [1.1 安装与两种引入模式](#1.1 安装与两种引入模式)
  - - 全量引入（适合快速原型）
    - 按需引入（推荐生产环境）
- 二、核心组件实战：重构任务管理系统
- - [2.1 表格组件：专业数据展示](#2.1 表格组件：专业数据展示)
  - [2.2 表单组件：优雅数据录入](#2.2 表单组件：优雅数据录入)
  - [2.3 反馈组件：增强交互体验](#2.3 反馈组件：增强交互体验)
- 三、主题定制：打造品牌化视觉系统
- - [3.1 SCSS变量覆盖](#3.1 SCSS变量覆盖)
  - [3.2 动态换肤方案](#3.2 动态换肤方案)
- 四、项目整合：UI升级全流程
- - [4.1 改造前后对比图](#4.1 改造前后对比图)
  - [4.2 性能优化建议](#4.2 性能优化建议)
- 总结与思考

前言

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 安装与两种引入模式

bash 复制代码

npm install element-plus @element-plus/icons-vue

全量引入（适合快速原型）

javascript 复制代码

// main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
  .use(ElementPlus)
  .mount('#app')

按需引入（推荐生产环境）

bash 复制代码

npm install -D unplugin-element-plus

javascript 复制代码

// vite.config.js
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
    ElementPlus({
      useSource: true
    }),
  ]
})

二、核心组件实战：重构任务管理系统

2.1 表格组件：专业数据展示

vue 复制代码

<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 表单组件：优雅数据录入

vue 复制代码

<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 反馈组件：增强交互体验

javascript 复制代码

// 在Pinia action中使用消息提示
const deleteTask = async (id) => {
  try {
    await service.delete(`/tasks/${id}`)
    ElMessage.success('删除成功')
    this.fetchTasks()
  } catch (error) {
    ElMessage.error('删除失败')
  }
}

三、主题定制：打造品牌化视觉系统

3.1 SCSS变量覆盖

scss 复制代码

// styles/element.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #42b983,
    )
  )
);

3.2 动态换肤方案

javascript 复制代码

// 切换主题色
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实现交互动效
• 集成第三方图表库实现数据可视化