title: 前端与工程化 tags:

topic
frontend
engineering
joplin type: topic source_type: reconstructed created: 2026-04-23 updated: 2026-04-23 aliases:
前端工程化 ---

前端与工程化

[!abstract] 本主题重构自 JavaWeb 中与前端开发、构建管理、模块化和部署相关的笔记，重点不是把它当作 Java 附属章节，而是整理成一条完整的“页面结构 -> 交互与组件 -> 工程构建 -> 部署交付”学习主线。

这门主题在解决什么问题

浏览器如何把前端代码转换成用户看到的页面。
HTML、CSS、JavaScript、Vue、Ajax、组件库分别负责页面系统中的什么层次。
为什么前端项目不能停留在静态页面，而必须进入工程化、模块化和依赖管理。
Maven、分模块、继承聚合、部署环境这些内容为什么虽然跨到后端和运维，但仍属于“工程化能力”的一部分。
前端资源、接口调用、Nginx、Linux、Docker 如何共同构成一个可交付的 Web 应用链路。

推荐复习顺序

[[前端基础结构与样式]]
[[JavaScript、Vue与前端交互]]
[[Ajax、组件库与页面集成]]
[[工程化构建与依赖管理]]
[[前端部署与运行环境]]

模块地图

[[前端基础结构与样式]]：网页组成、浏览器内核、Web 标准、HTML 结构标签、CSS 表现层。
[[JavaScript、Vue与前端交互]]：[[JavaScript]] 基础、脚本引入、变量与语法、DOM 行为、[[Vue]] 的响应式页面组织。
[[Ajax、组件库与页面集成]]：[[Ajax]]、[[Axios]]、[[ElementUI]]、前后端交互与局部更新。
[[工程化构建与依赖管理]]：[[Maven]]、[[Maven分模块设计]]、继承、聚合、仓库、统一结构与构建流程。
[[前端部署与运行环境]]：[[Nginx]]、[[Linux部署基础]]、[[Docker]] 与静态资源、服务部署环境的关系。

关键概念

[[HTML]]
[[CSS]]
[[JavaScript]]
[[Vue]]
[[Ajax]]
[[Axios]]
[[ElementUI]]
[[Maven]]
[[Maven分模块设计]]
[[Nginx]]
[[Linux部署基础]]
[[Docker]]

常见误区

把前端只理解成“写页面”，忽略浏览器解析、交互、异步通信和组件化。
把 HTML、CSS、JavaScript 当成三份孤立知识，不把它们放回结构、表现、行为的统一模型里。
学了 Vue 只会写指令，不理解它是在解决页面状态与视图同步问题。
把 Ajax 只当接口调用语法，不理解它改变的是页面刷新模式。
把 Maven 视为纯 Java 内容，不把它看作工程化中的依赖管理和构建组织工具。
把 Linux、Docker、Nginx 当成部署杂项，导致“本地能跑”到“可交付上线”中间断层。

关联主题

[[JavaWeb与SpringBoot]]：当需要从服务端请求响应角度回看前后端协作时进入。
[[Java持久层与Maven工程化]]：当需要从 Java 项目构建与配置角度回看工程化时进入。
[[Maven]]：构建与依赖管理的基础概念页。

来源范围

[[raw/Joplin/编程学习项目/Java学习笔记/JavaWeb/1.HTML-CSS.md]]
[[raw/Joplin/编程学习项目/Java学习笔记/JavaWeb/2.JavaScript-Vue.md]]
[[raw/Joplin/编程学习项目/Java学习笔记/JavaWeb/3.Vue_Element.md]]
[[raw/Joplin/编程学习项目/Java学习笔记/JavaWeb/4.Maven.md]]
[[raw/Joplin/编程学习项目/Java学习笔记/JavaWeb/17.Maven高级.md]]
[[raw/Joplin/编程学习项目/Java学习笔记/JavaWeb/18.前端, 部署--Linux, Docker.md]]

相关入口

[[joplin-overview]]
[[joplin-rebuild-schema]]