前端开发早Yi不再是简单的堆砌HTML标签或者拼凑几个Vue组件。我们正处在一个转折点上：代码不仅要写给人kan，还要写得让“机器”Neng理解。你有没有想过为什么有些项目交给AI助手时它Neng精准地补全逻辑，而在另一些项目里它却总是胡乱猜测？这其中的差别，往往不在于AI的智商，而在于我们是否遵循了一套经过沉淀的、系统化的开发规则。

今天我们就来深度剖析一下在AI视角下那些优秀的前端项目究竟遵循了哪些不为人知的纪律。这不仅仅是关于代码规范，geng是一场关于如何降低维护成本、提升演进效率的深度探讨。

这一点变得尤为重要。

试想一下当一个新的成员——无论是刚入职的人类工程师，还是一个正在扫描仓库的AI Agent——接手你的代码库时他们面临的Zui大障碍是什么？是不知道“新文件该放哪”，是搞不清楚“谁Neng依赖谁”。Ru果项目中充斥着跨域耦合和循环依赖，那么无论是人还是AI，dou会陷入绝望的泥潭。

因此，我们的首要目标非常明确：建立一套清晰的导航系统。这套系统不需要复杂的文档，而是通过目录结构和命名约定，让任何接手仓库的“智Neng体”douNeng瞬间判断出业务逻辑的归属。这就像城市的路牌，指引着交通的流向，避免拥堵。

一个混乱的文件夹结构是技术债务的温床。在经过大量项目实战后我们发现一套行之有效的目录骨架是必不可少的。

src/
├── api/                 # 按业务域/资源分子目录；仅 HTTP 与类型
├── assets/              # 静态资源
├── components/          # 跨页复用组件
├── composables/         # 或 hooks/，任选其一或并存但职责不重复
├── config/              # HTTP 客户端、应用级配置
├── constants/ 或 constant/ # 全局常量、枚举映射
├── directives/          # 自定义指令
├── layout/ 或 layouts/  # 壳层布局
├── locales/             # 或 i18n/
├── plugins/             # Vue 插件注册
├── router/              # 路由
├── store/ 或 stores/    # 全局状态
├── styles/              # 全局样式
├── types/               # 全局类型
├── utils/               # 纯工具函数
└── views/ 或 pages/     # 路由页面；域级子目录与 api/ 对齐

当然这并不是死板的教条。对于小型项目，你Ke以大刀阔斧地删减那些空目录；而对于大型项目，你可Neng需要增加 `services/`、`lib/` 等层级。但关键在于，无论你怎么增删，dou必须在 README 中说明职责，且绝对不Neng破坏上述的依赖方向。

在具体落地时我们通常会面临两种主流的组织策略，全仓库必须保持一致，切忌混用：

1. 按技术分层： 这是Zui经典的方式。`api/*`、`views/*`、`components/*` 清晰分离。这种方式特别适合中后台管理系统，或者是那些业务域并列、逻辑相对独立的项目。它的优点是结构清晰，一眼就Nengkan到技术栈的分布。

2. 按功Neng域： 这种方式越来越受到现代前端工程的青睐。比如 `features/order/{api, components, pages}`。它将所有与“订单”相关的代码——无论是接口、组件还是页面——dou封闭在一个文件夹里。这非常适合那些业务边界强、团队按域分工的大型项目。

Ru果你尝试混合使用这两种策略，那就必须约定严格的纪律：域内文件Ke以就近放置，但域间的共享必须通过 `components/`、`hooks/`、`api/` 等公共层进行。绝对禁止 `views/domainA` 去深层 `import` `views/domainB` 的内部实现文件。这就像是你不Neng为了借邻居家的盐，直接拆了邻居家的墙一样。

在前端开发中，与后端接口的交互往往是Zui容易出乱子的地方。hen多糟糕的代码习惯，就是在这里滋生的。为了提升可读性与维护性，我们需要配合异常处理策略，制定严格的API处理规范。

让我们来kan一个典型的反例

// 反例：未按统一成功判定，易把失败响应当列表用
const res = await api.getList
const list = Array.isArray ? res : 

这种写法相信大家dou不陌生。它充满了“猜测”：猜后端返回的是数组，猜数据在 `list` 字段还是 `data` 字段。这种代码在AIkan来也是极其困惑的，因为它没有明确的逻辑判断。

合格的实现方向应该是这样的：严格按照 `README.md`与 HTTP 客户端/拦截器的实际行为来判定请求是否成功。只有在确认成功之后再去读取载荷，并对数组或对象进行校验与默认值处理。

记住以下属于不合格的操作请求返回后不先按项目约定判断成功与否，仅凭“像数组”或者带有 `list`/`data` 字段就盲目猜测结构，将其当作有效数据使用。这种Zuo法不仅埋下了Bug的隐患，也让AI无法理解你的业务逻辑。

随着业务的发展，我们不可避免地会遇到“大文件”。如何拆分这些臃肿的组件，是考验开发者功底的试金石。这里有一条必须遵守的大文件拆分顺序

先抽 composables，再抽 展示型子组件。

hen多新手容易犯的错误是：禁止只拆分模板，把核心逻辑仍然堆在父组件里。这种拆分不仅没有减轻负担，反而让代码geng加支离破碎。正确的Zuo法是将业务逻辑剥离到 `composables` 或 `hooks` 中，让组件只负责渲染。这样，无论是人类阅读还是AI重构，douNeng迅速抓住重点。

Zui后但也是Zui重要的一点：所有的规则、所有的约定，其Zui终的解释权dou在 README.md 手中。

我们常说具体的大小、类型、个数、是否分片，dou要以 README 为准。本节所讨论的所有内容，本质上dou是通用纪律。你Ke以在项目的副本中按需增补 `provide/inject` 类型策略、全局状态库边界、路由守卫与鉴权细则、E2E/单测策略。Ru果项目没有使用 Commitlint，那么提交与分支规范也应该在 README 中单独约定。

特别是关于后端/API相关的约定——比如成功码是什么、失败形态长什么样、错误提示字段叫什么、不存在资源时的HTTP行为是什么等等——这些dou不应该写死在代码里。README 必须是这些信息的唯一事实来源。Ru果契约写在了其他文件，README 必须指向该文件。

AI 与开发者在实现功Neng前，必须先读这份文档。这不仅是流程，geng是铁律。

总而言之，AI沉淀下来的前端开发规则，并不是为了束缚我们的手脚，而是为了释放创造力。通过清晰的目录结构、严格的API交互纪律、科学的组件拆分顺序以及以README为核心的契约精神，我们构建的是一个不仅人类Neng读懂，AI也Neng高效协作的代码世界。在这个世界里`views` 与 `api` 下的下一级文件夹不需要被写死，只需在 README 列出「域 ↔ 路径」映射即可。这才是现代前端工程应有的样子。