2、前端架构三要素：模块化、工程化、平台化

🧱 写在前面

架构不是玄学，也不是 PPT，它的三个核心基石是：

模块化：管理复杂代码的边界与职责
工程化：提升团队效率的工具与流程
平台化：打造可复用、可配置、可扩展的系统能力

这一篇，我们通过具体代码与场景实战，逐一讲清楚这三个维度如何落地，避免空谈架构理念。

📦 一、模块化：对复杂性的第一道防线

✅ 1.1 合理划分模块边界（以"用户中心"为例）

bash 复制代码

src/
├── modules/
│   ├── user/
│   │   ├── api.ts          # 用户相关接口
│   │   ├── store.ts        # 用户状态管理
│   │   ├── views/          # 用户页面
│   │   ├── components/     # 用户组件
│   │   └── utils.ts        # 用户领域工具函数

这样做的好处：

所有用户相关代码归拢
高内聚、低耦合
支持模块级独立发布（未来微前端）

🎯 1.2 实战演示：模块级 service 封装

ts 复制代码

// modules/user/api.ts
import { request } from '@/utils/request'

export const getUserInfo = (id: string) => {
  return request.get(`/api/user/${id}`)
}

ts 复制代码

// modules/user/views/Profile.vue
setup() {
  const route = useRoute()
  const { data } = useAsync(() => getUserInfo(route.params.id))
  return { data }
}

✅ 优点：

api 层清晰可复用
页面只管"使用"，不管"怎么请求"

⚙️ 二、工程化：让系统跑得更快、更稳

✅ 2.1 脚手架：项目创建统一化

bash 复制代码

npx create-my-app my-project
# 可选功能：
# - Vue/React
# - TypeScript
# - 是否集成表单系统
# - 是否使用微前端架构

脚手架能统一：

目录结构
依赖版本
linter/prettier/husky 规则
测试框架（Jest + RTL / Vitest + Vue Test Utils）

✅ 2.2 ESLint + Prettier + Husky 实战配置

bash 复制代码

npm i -D eslint prettier eslint-config-prettier husky lint-staged

.eslintrc.js:

js 复制代码

module.exports = {
  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
}

.husky/pre-commit:

bash 复制代码

#!/bin/sh
npx lint-staged

package.json:

json 复制代码

"lint-staged": {
  "*.{js,vue,ts}": "eslint --fix"
}

🧼 结果：每次 commit 自动修复代码 + 提高团队协作效率。

✅ 2.3 CI/CD + 自动部署

yaml 复制代码

# GitHub Actions
name: Deploy
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build
      - run: scp -r dist/ root@xx.xx.xx:/usr/share/nginx/html

🎯 工程化目标是：任何人 clone 项目，都能一键启动开发 / 构建 / 发布。

🏗️ 三、平台化：真正的架构师战场

当你团队项目越来越多，下面这些问题开始频繁出现：

问题	平台化解法
各项目权限不一致	做权限平台，角色-权限统一管理
各项目 UI 风格不同	做统一组件库平台（如 Naive-UI/TT-PF）
重复开发导出、表格、表单功能	抽象平台模块，按需接入
多项目无法联动	微前端 or 模块联邦平台化统一发布

🎯 实战：构建统一权限平台

ts 复制代码

// usePermission.ts
export function usePermission(permissionCode: string) {
  const userPermissions = getUserInfo().permissions
  return userPermissions.includes(permissionCode)
}

vue 复制代码

<!-- 业务组件中统一判断权限 -->
<pf-button v-if="usePermission('user.delete')">删除</pf-button>

这样做的好处：

权限配置集中化管理（权限系统后台控制）
所有项目使用统一逻辑
日后支持 AB 测试、灰度权限控制更容易

⚙️ 平台化工具建设建议：

能力	推荐方案
UI组件库	TT-PF、Naive-UI 二次封装
表单平台	JSON Schema 驱动的动态表单
权限管理	RBAC + 前端权限钩子封装
多项目联动	Module Federation + Vite Plugin Federation
配置管理	配置中台 + JSON 配置托管服务
埋点系统	页面级自动采集 + 手动打点 Hook
API文档	Swagger/OpenAPI 联动接口平台

🧩 总结一句话

模块化负责"代码边界"，工程化解决"效率稳定"，平台化决定"团队规模化复制能力"。

下篇我们将正式进入系统分层结构设计 ，也就是： 👉 《大型项目中的目录结构设计与复用策略》