使用openCode AI coding前端项目开发

一、核心工作流：Plan + Build 模式

这是 OpenCode 最核心的开发模式——先聊透需求，再生成代码。

第一步：初始化项目说明书

opencode /init

这会在项目根目录生成 AGENTS.md 文件。写得越详细，AI 越聪明。示例内容：

# 项目 AI 助手配置文档

## 1. 角色设定
你是一位精通现代前端开发的技术专家。
- **技术栈**：基于 Vue3 + TypeScript + Vite（若使用 React，请对应修改）。
- **组件库**：优先使用 Element Plus（或 Ant Design）。
- **核心原则**：代码简洁、类型安全、性能优先。

## 2. 项目上下文
- **源码目录**：所有源代码位于 `src/` 目录。
- **核心文件**：
  - `src/main.ts`：应用入口，**禁止修改**。
  - `src/router/index.ts`：路由配置。
  - `src/stores/`：全局状态管理（Pinia）。
- **构建配置**：`vite.config.ts`、`package.json`，修改前需确认。

## 3. 编码规范
请严格遵守以下规则生成或修改代码：
- **命名规范**：
  - 组件文件/文件夹：**PascalCase**（如 `UserProfile.vue`）。
  - 变量/函数/路由路径：**camelCase**。
  - CSS 类名：**kebab-case**。
- **TypeScript 规范**：
  - **禁止**使用 `any` 类型。
  - 所有 Props、Emits 和 API 返回值必须定义明确的 Interface 或 Type。
- **样式规范**：
  - 使用 `scoped` 的 `<style lang="scss">`，禁止全局样式污染。
  - 布局优先使用 Flexbox/Grid，禁止魔法数值（如 `margin-top: -3px`）。

## 4. 操作权限
为了项目安全，请遵守以下文件操作边界[citation:3][citation:5]：
- **允许编辑**：仅限 `src/components/`, `src/views/`, `src/utils/` 目录。
- **只读禁止修改**：`src/main.ts`, `package.json`, `pnpm-lock.yaml`（除非我明确要求）。
- **禁止生成**：不要创建 `node_modules`、`.git` 或 `.vscode` 等无关配置文件。

## 5. 业务逻辑约定
- **API 请求**：必须使用 `src/utils/request.ts` 中封装的实例，包含拦截器和错误处理。
- **路由跳转**：优先使用路由名称（Name）而非路径（Path）。
- **UI 组件**：超过 200 行或具有复用性的模块，必须拆分为独立组件。

## 6. 输出格式要求
- 当你生成代码时，请在末尾简要说明你修改了哪些文件。
- 对于超过 50 行的大文件修改，请先展示 `diff` 预览，询问后再应用。

 

第二步：Plan 模式聊需求

按 Tab 键切换到 Plan 模式（只读，AI 不会改代码）：

做一个个人博客前端项目，技术栈用 Vue3 + TypeScript + Vite。
需要这些功能：
- 文章列表页（分页、分类筛选、搜索）
- 文章详情页（Markdown 渲染、代码高亮）
- 暗色/亮色主题切换
- 响应式设计

请先和我聊清楚具体需求，再出技术方案。

AI 会主动问你一系列问题：头像用什么、文章数量、是否需要评论功能等。聊 3-5 分钟把需求敲定。

第三步：Build 模式生成代码

聊清楚后，按 Tab 切回 Build 模式：

按照刚才讨论的方案，生成完整代码。

AI 会自动创建项目结构、写组件、配置路由。2-3 分钟就能得到可运行的前端项目。

4. 常用命令速查

命令	作用
/init	初始化 AGENTS.md 项目说明
/plan	只读分析模式（安全，先思考再动手）
/build	完整构建/修改模式
/models	切换当前模型
/review	Review 当前改动
/connect	配置模型 API Key
/undo	撤销上一次 AI 操作
@文件名	引用项目文件作为上下文

💡 使用技巧总结

1. 别跳过 Plan 模式：让 AI 先理解需求比让它直接写代码再反复修改效率高得多

2. 写清楚 AGENTS.md：这是 AI 理解你项目的“说明书”，写得越详细 AI 表现越好

3. 用 @ 引用文件：@src/components/xxx.tsx 让 AI 精准理解上下文

4. 善用 /review：让 AI 审查代码改动，发现潜在问题

5. 模型可随时切换：不同任务用不同模型（Claude 写代码强，GPT 规划强）

🔗 参考资源

• 官方文档：https://opencode.ai

• GitHub 仓库：https://github.com/anomalyco/opencode

• Vite 插件：vite-plugin-opencode-assistant