前端工程化

前端工程化 = 用工具把”源代码”（.vue 组件、ES Module、TS、SCSS 等）转换成浏览器能直接运行的、优化后的产物。

它的核心三件套是：模块化（ES Module）+ 包管理（npm）+ 构建工具（Vite）。对 Java 程序员来说，这套东西就相当于 Maven/Gradle 的角色——管理依赖、编译打包、提供构建流程。

一、为什么需要工程化

问题 例子 工程化解决
模块化 import a from "./a.js" 把多个模块打包合并
转译 .vue 文件、TypeScript、SCSS 编译成浏览器认识的 HTML/CSS/JS
依赖管理 用了 Vue、axios 等库 npm 统一安装管理
优化 未使用代码、大文件 压缩、tree-shaking

二、模块化 ES Module（重点）

1. 导出 export

1
2
3
4
// utils.js
export default function add(a, b) { return a + b; }  // 默认导出（一个模块只能一个）
export const name = "Tom";                           // 命名导出（可多个）
export function multiply(a, b) { return a * b; }

2. 导入 import

1
2
3
4
5
import add from "./utils.js";                  // 导入默认（可任意起名）
import { name, multiply } from "./utils.js";   // 导入命名（名字要对应）
import { name as n } from "./utils.js";        // 重命名
import * as utils from "./utils.js";           // 全部导入
import add, { name } from "./utils.js";        // 混合导入

3. 默认导出 vs 命名导出

export default export
数量 一个模块只能一个 可多个
导入写法 import x from import { x } from
导入时 名字随意 名字必须对应（或 as 重命名）

4. Vue 里的实际写法

1
2
3
4
5
// main.js
import { createApp } from "vue";   // 命名导入（vue 库）
import App from "./App.vue";       // 默认导入（自己的组件）

createApp(App).mount("#app");

三、npm 与包管理

npm（Node Package Manager）是 JS 的包管理工具，随 Node.js 一起安装。注意：这里只用 Node 的工具链，不写 Node 服务端代码（后端是 Java）。

1. 常用命令

1
2
3
4
5
6
npm init -y             # 初始化项目，生成 package.json
npm install vue         # 安装依赖，写入 dependencies
npm install -D vite     # 安装开发依赖，写入 devDependencies（-D 即 --save-dev）
npm install             # 根据 package.json 安装所有依赖
npm run dev             # 执行 scripts 里的 dev 脚本
npm uninstall vue       # 卸载依赖

2. package.json（项目清单）

1
2
3
4
5
6
7
8
9
10
11
12
{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}
字段 作用
scripts 自定义命令，npm run 名字 执行
dependencies 运行时需要的库（vue、axios）
devDependencies 只在开发/构建时需要的工具（vite、sass）

3. 其他文件

  • node_modules/：装好的依赖目录，不进 git（用 npm install 重新生成）。
  • package-lock.json：锁定依赖版本，保证团队一致。

四、构建工具 Vite

1. 为什么需要构建工具

浏览器不认识 .vue、TypeScript、SCSS，也处理不了大量模块。Vite 负责把这些”翻译 + 打包”。

2. 三大作用

作用 说明
开发服务器 npm run dev 起本地服务，改代码热更新（HMR）自动刷新
打包 npm run build 生成 dist/ 目录（生产产物）
预览 npm run preview 本地预览打包后的产物

3. vite.config.js（常用配置）

1
2
3
4
5
6
7
8
9
10
11
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],                // 让 Vite 认识 .vue 文件
  server: {
    proxy: {                       // 开发代理，解决跨域
      "/api": "http://localhost:8080"   // 请求 /api 转发到 Java 后端
    }
  }
});

开发代理的妙用：前端请求 /api/... 时，Vite 把它转发到 Java 后端，从而绕开浏览器跨域限制（Java 后端不用改 CORS）。

4. Webpack 概念对照（了解即可）

Webpack Vite
开发方式 启动时全量打包 按需加载，不打包
启动/更新速度 慢 快
配置复杂度 高 低
定位 老牌、生态最大 新一代、Vue3 默认

新项目（尤其 Vue3）直接用 Vite，Webpack 遇到老项目再查文档。

五、典型 Vue 项目结构

1
2
3
4
5
6
7
8
9
10
my-vue-app/
├── index.html          # 入口 HTML
├── package.json        # 依赖和脚本
├── vite.config.js      # Vite 配置
├── src/
│   ├── main.js         # 入口 JS：创建 Vue 应用并挂载
│   ├── App.vue         # 根组件
│   ├── components/     # 可复用组件
│   └── assets/         # 静态资源（图片、样式）
└── node_modules/       # 依赖（自动生成）

启动渲染流程：

1
2
3
4
index.html 引入 main.js
  → main.js 创建 Vue 应用、挂载到 #app
    → App.vue（根组件）渲染页面
      → 内部引用 components/ 里的子组件

六、速查表

需求 写法
默认导出 export default fn
命名导出 export const x = ...
导入默认 import fn from "./a.js"
导入命名 import { x } from "./a.js"
初始化项目 npm init -y
安装依赖 npm install vue
安装开发依赖 npm install -D vite
启动开发服务器 npm run dev
打包 npm run build
开发代理跨域 vite.config.js 里 server.proxy

七、复习要点

  1. 工程化 = 模块化 + npm + Vite，相当于前端的 Maven/Gradle。
  2. ES Module：export default（一个）+ export（多个）；导入对应 import x from / import { x } from。
  3. npm 管依赖：install 装包、run 执行脚本；dependencies 是运行时依赖、devDependencies 是开发工具。
  4. Vite 三大作用：开发服务器（热更新）+ 打包 + 预览；vite.config.js 里可配插件和跨域代理。
  5. 开发代理能让前端请求转发到 Java 后端，绕开跨域。
  6. Vue 项目入口是 main.js（挂载 App.vue），src/ 放源码、components/ 放组件。
  7. 新项目用 Vite，Webpack 了解概念即可。
  8. 忘了某条，回本文对应小节查示例即可。