写在前面

不想当架构的前端，可能也是好前端

你可能是团队的核心开发者，也可能是独自打怪的全栈工程师，或许你已经负责多个项目，但你是否真的在“做架构”？前端架构师的价值，并不是只说理念，而是能把系统做“更可维护、可复用、可演进”。这一篇文章，我们从实战出发，讲清楚前端架构师该做什么，不该做什么，以及你如何成为那个“决定系统方向的人”

前端架构师到底是干嘛的？

普通高级前端	前端架构师
负责一个模块	负责多个系统/产品
写好业务代码	设计模块边界、基础能力
关注功能完成	关注性能、扩展、长期演进
修 bug、提效	规范制定、团队赋能

前端架构师核心职责三点：

技术架构搭建：选型、分层、封装、治理
通用能力沉淀：组件库、工具库、Hook、权限、表单、埋点、异常等
体系化支撑：统一代码规范、CI/CD、监控系统、权限系统、微前端等

用代码理解架构师思维

场景：你需要一个通用弹窗

普通开发者思路（写死在业务里）：

<!-- 页面A -->
<template>
  <div>
    <button @click="show = true">删除用户</button>
    <Modal v-if="show" title="确认删除">
      <p>是否确认删除该用户？</p>
      <template #footer>
        <button @click="confirmDelete">确认</button>
      </template>
    </Modal>
  </div>
</template>

弊端：

每个页面写一遍 Modal
无法统一风格
无法统一逻辑（如 loading、关闭回调）

架构师思路（封装为弹窗服务）：

step 1. 创建 useDialog composable

// useDialog.ts
import { h, render } from 'vue'
 
export function useDialog() {
  return function openDialog({ title, content, onConfirm }) {
    const container = document.createElement('div')
    document.body.appendChild(container)
 
    const vnode = h(MyDialog, {
      title,
      content,
      onConfirm,
      onClose: () => {
        render(null, container)
        document.body.removeChild(container)
      },
    })
 
    render(vnode, container)
  }
}

step 2. 业务中调用方式

const openDialog = useDialog()
 
openDialog({
  title: '确认删除',
  content: '是否确认删除该用户？',
  onConfirm: async () => {
    await deleteUserAPI()
    toast.success('删除成功')
  },
})

优点：

页面逻辑清晰
弹窗复用统一
后续加 confirm loading、动画、权限校验等都容易

架构不是造轮子，而是统一解法

架构师不是做“重复工具”，而是提炼模式，统一方法。例如：

问题	架构师解法
页面跳转参数多	封装 `useQueryState`
多项目样式不一致	设计 UI 组件库 + 样式规范
权限分散配置	统一权限中台设计
表单配置重复	实现配置式表单系统

实战中构建你的架构价值

示例场景：数据可视化系统

需求：开发 10 个不同模块的图表页面，包含不同权限、表单筛选、导出、图表展示等

作为架构师你需要考虑：

是否抽象出统一的图表配置系统？
表单是否支持动态 schema？
图表库（ECharts/Chart.js）封装层该如何设计？
权限/菜单/路由是否统一处理？

于是你可能输出：

useChartConfig()：图表配置钩子
<DynamicForm />：动态表单渲染器
<PageContainer />：通用布局 + 权限判断 + 面包屑 + 面板容器
permissionUtils.ts：判断是否展示某按钮

如何从开发者进阶架构师？

复盘已有项目问题
- 有哪些重复代码？
- 哪些逻辑改动频繁？
- 哪些模块可以复用抽象？
主动设计通用能力
- 表单系统、上传系统、埋点系统、错误处理系统、弹窗服务、权限系统
沉淀统一规范
- 命名、目录结构、commit message、代码风格
培养全局视野
- 多项目、多端协作、后端联动、部署运维

My-Notes

全部文章

001.为什么需要成为前端架构师