蜗牛学苑 Java 智能体学习 Day40｜Vue 工程化与 ElementPlus 思维导图复盘

一、思维导图整体知识结构梳理

Vue 工程化

传统直接引入 js 开发模式

• 存在的问题：不规范，每次从头开始开发，重复工作量大；难复用，多个页面组件共性要重复写；资源混乱：js、图片资源无统一管理，没有构建
• 痛点：企业级前端项目，把工具、技术、流程、代码规范标准化

前端工程化

• 概念：统一开发规范，提升开发效率，降低开发难度，提高代码质量
• 四大特点
  • 模块化：js 组件、css 模块、行为拆分成组件
  • 组件化：ui 组件、业务组件封装，代码复用
  • 规范化：编码规范目录结构、编码规范、团队共同遵守
  • 自动化：项目构建、测试、部署全部自动完成

环境准备

1. NodeJS
   • 作用：Vue 工程化必须依赖的运行环境
   • 安装要点：官网下载 LTS 长期稳定版本；安装路径不能包含中文、空格
   • 验证安装：node -v、npm -v
2. npm 包管理器
   • 说明：Node Package Manager，NodeJS 软件包管理器，随 NodeJS 一起安装，无需单独安装
   • 版本查看：npm -v
   • 淘宝镜像配置：加速下载依赖包

create‑vue 脚手架

• 简介：Vue 官方最新脚手架工具，底层构建工具为 Vite
• 提供功能：统一的项目目录结构；本地调试；热部署；单元测试；集成打包上线
• 创建项目命令：npm create vue@latest
• 创建交互提示：项目名称、是否引入各类工具
• 项目自动步骤
  • cd 你的项目名：进入项目目录
  • npm install：安装项目所有依赖，需要联网，失败就重复执行
  • npm run dev：启动开发服务器
  • 访问地址：http://localhost:5173
• 项目结构
  • src 目录：最重要目录，业务代码全部写在此目录
  • template：HTML 模板，页面 UI 结构
  • script setup：js 业务逻辑
  • style：组件 css 样式

Vue 两种 API 风格

1. 组合式 API
   • 说明：Vue3 提供，基于函数编写组件逻辑
   • 常用 API
     • setup()：组合式 API 标记
     • ref()：生成响应式对象，读取修改需要.value
     • onMounted()：组件挂载完成后的生命周期钩子
   • 优势：相同功能代码集中写在一起；便于阅读、维护；方便组件之间逻辑复用；使用 hook 抽离通用组件逻辑
2. 选项式 API
   • 说明：Vue2 传统写法
   • 常用选项：data、methods、mounted
   • 访问方式：通过this访问组件实例的属性和方法
   • 存在问题：同一业务逻辑分散到各个配置项，阅读跳转大；复杂组件维护成本高
3. 两者关系：并存关系，不做二选一，项目一般统一一种风格

Java 与 Vue 技术类比

• 脚手架：Spring Initializr 对比 create‑vue
• 构建工具：Maven/Gradle 对比 Vite/Webpack
• 核心框架：Spring Framework 对比 Vue
• 状态管理：Redis/Session 对比 Pinia/Vuex

ElementPlus 组件库

介绍

• 来源：饿了么团队开发，专门面向 Vue3
• 作用：提供现成网页组件：按钮、表格、表单、弹窗、分页等，分页等，分担业务开发
• 学习方式：查阅官方文档，复制组件示例代码，修改属性适配业务
• 官网地址：element‑plus.org

使用步骤

1. 创建 Vue 工程化项目
2. 安装 ElementPlus 依赖：npm install element‑plus‑save
3. main.js 中全局引入注册
   • import 导入 element‑plus、css 样式
   • app.use(ElementPlus)
4. 配置中文语言（组件汉化）
5. 业务页面直接写组件标签
6. App.vue 引入自定义组件
7. npm run dev启动查看效果

常用组件

1. el‑button 按钮组件
   • type 属性：控制按钮样式颜色：primary /success/warning /danger/info
   • 事件：@click绑定点击事件
2. el‑table 表格组件
   • el‑table 属性：data绑定表格数据源；border边框；stripe斑马纹
   • el‑table‑column 表格列：prop绑定数据对象字段；label表头文字；width设置列宽
3. el‑pagination 分页组件
   • 属性：layout控制分页显示模块；total总数据条数；page‑size每页条数；v‑model:current‑page双向绑定当前页码
   • 事件：@size‑change每页条数改变；@current‑change页码改变
4. el‑dialog 对话框弹窗
   • 核心原理：v‑model布尔值控制弹窗显示隐藏
   • 属性：title弹窗标题
   • 使用流程：响应式变量控制弹窗显隐；弹窗内部嵌套表单等任意组件
5. el‑form 表单组件
   • el‑form 表单：model绑定整个表单数据对象；label‑width表单项文字宽度
   • 表单内部组件：el‑input输入框、el‑select下拉选择器等
   • 数据绑定：组件使用v‑model双向绑定表单对象内部字段
   • 提交：按钮点击事件获取表单数据提交后端

二、制作意图

1. 理解前端工程化的思想，明白工程化解决原生 js 开发的痛点，掌握 NodeJS、npm 环境安装配置；
2. 学会使用 create‑vue (Vite) 脚手架创建 Vue3 工程项目，熟悉项目目录结构；区分组合式 API 与选项式 API，掌握 setup 组合式开发写法；
3. 学习 ElementPlus 组件库，掌握完整引入的集成步骤；熟练掌握按钮、表格、分页、弹窗、表单高频业务组件，看懂官方文档，复制修改组件完成后台管理页面开发，为 HRM 管理系统前端做准备。

三、当日学习总结

Day40 学习 Vue3 工程化开发以及 ElementPlus 组件库：

1. 前端工程化解决原生 js 直接引入开发的混乱、不可复用、无构建打包的问题；需要安装 NodeJS 环境，npm 作为包管理器管理第三方依赖。
2. 使用 create‑vue 脚手架基于 Vite 快速生成 Vue3 工程项目；Vue3 有选项式 API（Vue2 旧写法）和组合式 API（setup 语法糖，推荐），组合式 API 逻辑聚合，便于维护复用。
3. ElementPlus 是 Vue3 的 UI 组件库，全局引入后，直接使用封装好的各类组件；重点掌握表格展示数据、分页实现分页查询、dialog 弹窗、el‑form 表单收集提交数据，企业后台系统高频组件，用于快速开发管理页面。