一、思维导图整体知识结构梳理
Vue 工程化
传统直接引入 js 开发模式
- 存在的问题：不规范，每次从头开始开发，重复工作量大；难复用，多个页面组件共性要重复写；资源混乱：js、图片资源无统一管理，没有构建
- 痛点：企业级前端项目，把工具、技术、流程、代码规范标准化
前端工程化
- 概念：统一开发规范，提升开发效率，降低开发难度，提高代码质量
- 四大特点
- 模块化：js 组件、css 模块、行为拆分成组件
- 组件化：ui 组件、业务组件封装，代码复用
- 规范化：编码规范目录结构、编码规范、团队共同遵守
- 自动化：项目构建、测试、部署全部自动完成
环境准备
- 作用：Vue 工程化必须依赖的运行环境
- 安装要点：官网下载 LTS 长期稳定版本；安装路径不能包含中文、空格
- 验证安装：node -v、npm -v
- 说明：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 风格
- 说明：Vue3 提供，基于函数编写组件逻辑
- 常用 API
- setup()：组合式 API 标记
- ref()：生成响应式对象，读取修改需要.value
- onMounted()：组件挂载完成后的生命周期钩子
- 优势：相同功能代码集中写在一起；便于阅读、维护；方便组件之间逻辑复用；使用 hook 抽离通用组件逻辑
- 说明：Vue2 传统写法
- 常用选项：data、methods、mounted
- 访问方式：通过this访问组件实例的属性和方法
- 存在问题：同一业务逻辑分散到各个配置项，阅读跳转大；复杂组件维护成本高
Java 与 Vue 技术类比
- 脚手架：Spring Initializr 对比 create‑vue
- 构建工具：Maven/Gradle 对比 Vite/Webpack
- 核心框架：Spring Framework 对比 Vue
- 状态管理：Redis/Session 对比 Pinia/Vuex
ElementPlus 组件库
介绍
- 来源：饿了么团队开发，专门面向 Vue3
- 作用：提供现成网页组件：按钮、表格、表单、弹窗、分页等，分页等，分担业务开发
- 学习方式：查阅官方文档，复制组件示例代码，修改属性适配业务
- 官网地址：element‑plus.org
使用步骤
- import 导入 element‑plus、css 样式
- app.use(ElementPlus)
常用组件
- type 属性：控制按钮样式颜色：primary /success/warning /danger/info
- 事件：@click绑定点击事件
- el‑table 属性：data绑定表格数据源；border边框；stripe斑马纹
- el‑table‑column 表格列：prop绑定数据对象字段；label表头文字；width设置列宽
- 属性：layout控制分页显示模块；total总数据条数；page‑size每页条数；v‑model:current‑page双向绑定当前页码
- 事件：@size‑change每页条数改变；@current‑change页码改变
- 核心原理：v‑model布尔值控制弹窗显示隐藏
- 属性：title弹窗标题
- 使用流程：响应式变量控制弹窗显隐；弹窗内部嵌套表单等任意组件
- el‑form 表单：model绑定整个表单数据对象；label‑width表单项文字宽度
- 表单内部组件：el‑input输入框、el‑select下拉选择器等
- 数据绑定：组件使用v‑model双向绑定表单对象内部字段
- 提交：按钮点击事件获取表单数据提交后端
二、制作意图
三、当日学习总结
Day40 学习 Vue3 工程化开发以及 ElementPlus 组件库：
