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

写在前面

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

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

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

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

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

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

这样做的好处：

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

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

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

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

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

优点：

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

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

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

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

脚手架能统一：

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

2.2 ESLint + Prettier + Husky 实战配置

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

.eslintrc.js:

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

.husky/pre-commit:

#!/bin/sh
npx lint-staged

package.json:

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

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

2.3 CI/CD + 自动部署

# 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 项目，都能一键启动开发 / 构建 / 发布。

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

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

实战：构建统一权限平台

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

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

这样做的好处：

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

平台化工具建设建议：

总结一句话

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