---
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 应用链路。

## 推荐复习顺序

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

## 模块地图

- [[前端基础结构与样式]]：网页组成、浏览器内核、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]]