Skip to content

Latest commit

 

History

History
187 lines (137 loc) · 4.5 KB

QUICKSTART.md

File metadata and controls

187 lines (137 loc) · 4.5 KB

快速开始 - Vue3 组件库项目初始化

📋 已完成工作

✅ 变更提案已创建并验证通过

变更 ID: init-vue3-component-library

📂 提案文件位置

openspec/changes/init-vue3-component-library/
├── proposal.md          # 完整提案说明（包含目标、技术决策、验收标准等）
├── tasks.md            # 详细实施任务清单（7个阶段，34个任务）
└── specs/              # 规范增量文件
    ├── component-library-infrastructure/
    │   └── spec.md     # 项目基础设施规范（6个需求）
    └── button-component/
        └── spec.md     # Button组件规范（10个需求）

🎯 提案内容概要

核心目标

初始化一个现代化的 Vue3 组件库开发环境，包括：

  • 构建工具链（Vite + TypeScript）
  • 文档系统（Vitepress）
  • 示例组件（Button）
  • 开发工具（ESLint + Prettier + Vitest）

技术栈

  • Vue 3.3+
  • TypeScript 5+
  • Vite 5+
  • Vitepress
  • Vitest + Vue Test Utils

新增能力规范

  1. component-library-infrastructure: 项目基础设施

    • 项目配置管理
    • TypeScript 支持
    • 构建系统
    • 代码规范检查
    • 测试框架
    • 文档系统

  2. button-component: Button 组件

    • 基础渲染
    • 多种类型（primary, success, warning, danger）
    • 多种尺寸（small, medium, large）
    • 禁用状态
    • 加载状态
    • 点击事件
    • 图标支持
    • TypeScript 类型
    • 样式定制

🚀 下一步操作

1. 审查提案（必须）

# 查看提案摘要
openspec show init-vue3-component-library

# 查看详细规范
# 使用文本编辑器打开以下文件：
# - openspec/changes/init-vue3-component-library/proposal.md
# - openspec/changes/init-vue3-component-library/tasks.md
# - openspec/changes/init-vue3-component-library/specs/*/spec.md

审查要点：

  • ✓ 技术选型是否合适？
  • ✓ 需求是否完整？
  • ✓ 实施任务是否清晰？
  • ✓ 验收标准是否明确？

2. 开始实施（审批通过后）

按照 tasks.md 中的顺序逐步实施：

Phase 1: 项目基础配置

# 1.1 创建 package.json
npm init -y

# 1.2-1.5 安装依赖和创建配置文件
# （按照 tasks.md 中的详细步骤操作）

实施建议

  1. 按阶段执行: 不要跳过阶段，确保基础稳固
  2. 及时测试: 每完成一个阶段都要测试验证
  3. 更新清单: 完成后在 tasks.md 中勾选对应的复选框
  4. 记录问题: 遇到问题及时记录并解决

3. 验证完成

实施完成后，运行以下命令验证：

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 运行测试
npm run test

# 代码检查
npm run lint

# 构建项目
npm run build

# 启动文档
npm run docs:dev

4. 归档变更（完成后）

当所有任务完成并验证通过后：

# 归档变更（将变更从 changes/ 移到 changes/archive/）
openspec archive init-vue3-component-library --yes

📝 验收标准检查清单

实施完成后，确保以下所有项都满足：

  • 项目可以成功安装依赖
  • 开发服务器可以正常启动（npm run dev）
  • 组件库可以成功构建（npm run build）
  • 文档可以正常访问（npm run docs:dev）
  • Button 组件可以正常渲染
  • Button 组件测试全部通过
  • ESLint 检查无错误
  • TypeScript 类型检查通过

💡 提示

使用 OpenSpec 命令

# 列出所有变更
openspec list

# 查看变更详情
openspec show init-vue3-component-library

# 验证变更
openspec validate init-vue3-component-library --strict

# 查看 delta 规范
openspec show init-vue3-component-library --json --deltas-only

实施过程中

  • 按照 tasks.md 的顺序执行
  • 每完成一个任务就勾选对应的复选框
  • 遇到问题先查看 proposal.md 中的技术决策
  • 确保每个阶段完成后都能通过验证

完成标准

  • tasks.md 中所有复选框都已勾选
  • 所有验收标准都已满足
  • 代码已提交到版本控制
  • 文档已更新

🔗 相关资源

  • 项目上下文: openspec/project.md - 项目约定和规范
  • 提案文档: openspec/changes/init-vue3-component-library/proposal.md
  • 任务清单: openspec/changes/init-vue3-component-library/tasks.md
  • 规范文件: openspec/changes/init-vue3-component-library/specs/

开始实施前，请确保已仔细阅读并理解所有提案文档！ 🚀