SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场yy-create-vue3

yy-create-vue3

前端与建站

查看项目

更新于 10-15 16:53

技能介绍

用途

yy-create-vue3 用于基于当前技能目录下 scripts/ 的权威参考工程，创建或补齐 Vue 3 + TypeScript + Vite 项目。它优先复用现成参考文件，只做与项目名称、页面列表、可选目录和验证动作直接相关的最小调整。

主要能力

  • 新建 Vue 3 + TypeScript + Vite 前端项目。
  • 生成与当前技能 scripts/ 参考工程一致的目录结构、配置文件和源码骨架。
  • 在空白或轻量项目中补齐标准化的 Vue 3 工程基础设施。
  • 生成基础目录结构，包括 public/、scripts/、src/（apis、components、composables、router、utils、stores、styles、typings、views）和 tests/。
  • 按需补充 public/mock/ 与 src/languages/ 目录。
  • 生成源码骨架与页面，默认至少包含 HomeView，页面目录与文件同名并使用 PascalCase，页面专属子组件放在 _components/ 目录下。
  • 安装依赖并执行验证，默认使用 npm，可执行 npm install、npm run type-check、npm run test，用户明确要求时可额外执行 npm run dev:test。
  • 在项目创建或补齐完成后，检测当前环境是否可用 yy-enable-lint 技能，并在可用时触发该技能为项目添加 npm run lint 支持。

使用方式

技能按以下步骤执行：

  1. 确认任务边界与最小输入，收集项目名称（英文短横线命名，如 my-app）、目标目录、项目标题、页面列表（默认至少包含 HomeView）、是否需要 public/mock/、是否需要 src/languages/、是否执行依赖安装与验证，以及目标目录状态。
  2. 判定生成模式：目标目录不存在或为空按“新建项目”处理；已有少量工程文件且用户明确要求对齐结构按“补齐项目”处理；已有成熟工程内容则要求用户缩小范围。
  3. 从 scripts/ 复制参考工程并过滤无效产物，禁止复制 node_modules/、.eslintcache 及其他缓存、临时目录和本地安装产物；package-lock.json 默认不复制，优先通过后续 npm install 重新生成。
  4. 生成目录结构与基础配置，复制 scripts/package.json 后仅调整项目名称和用户明确要求的元数据；复制 scripts/vite.config.ts 与 scripts/vite.shared.ts，保持 base: "./" 和 @src -> ./src 别名不变；整组复制 scripts/tsconfig*.json；复制 scripts/eslint.config.ts、scripts/.prettierrc.json、scripts/.editorconfig、scripts/.gitignore。
  5. 生成源码骨架与页面，优先复制 scripts/src/ 和 scripts/tests/ 的基础文件，再围绕用户输入做最小定制；index.html 的 <title> 使用用户提供的项目标题，package.json 的 name 使用项目名称，路由配置与页面目录根据页面列表同步生成。
  6. 在目标项目根目录执行安装和验证，默认使用 npm；用户明确要求启动开发环境时额外执行 npm run dev:test；用户明确要求跳过安装或当前环境不适合联网安装时跳过命令执行并说明未验证项。
  7. 补齐 lint 支持，检测当前环境是否可用 yy-enable-lint 技能，可用时触发；不可用时不阻塞项目生成；用户明确要求不补齐时跳过并说明；执行失败时记录失败原因，不扩大处理范围。
  8. 输出结果，包括项目结构（tree 或 text 代码块）、本次创建或补齐的核心文件与目录、验证结果（区分已执行、跳过和失败项）、关键注意事项（包管理工具、路径别名、后续新增页面时需要同步更新路由）。

适用场景

  • 用户需要新建 Vue 3 + TypeScript + Vite 前端项目。
  • 用户需要生成与当前技能 scripts/ 参考工程一致的目录结构、配置文件和源码骨架。
  • 用户需要在空白或轻量项目中补齐标准化的 Vue 3 工程基础设施。

限制

不应触发的情况包括：

  • 用户只需要单个组件、页面或样式片段。
  • 用户要处理 React、Vue 2、Angular 或非 Vite 项目。
  • 用户要对成熟现有项目做大规模迁移、重构或架构改造。
  • 用户只是询问 Vue 3、TypeScript 或 Vite 的概念和用法。

安全边界：

  • 不修改当前技能目录下的 scripts/ 参考工程本身。
  • 不删除目标目录中的无关现有文件。
  • 未获用户明确授权时，不覆盖与本次目标无关的已有实现。
  • 不执行部署、发布、推送或其他与脚手架创建无关的高影响操作。

验证约束：

  • 包管理工具使用 npm，不改成 pnpm。
  • 路径别名保持 @src，不改成 @。
  • 不额外执行 build:*、部署或发布命令，除非用户明确要求。

相关资源

  • templates/package-json.md：package.json 轻量引用说明，权威来源为 scripts/package.json。
  • templates/vite-config.md：Vite 轻量引用说明，权威来源为 scripts/vite.config.ts 和 scripts/vite.shared.ts。
  • templates/tsconfig-templates.md：TypeScript 轻量引用说明，权威来源为 scripts/tsconfig*.json。
  • templates/eslint-prettier.md：代码检查轻量引用说明，权威来源为 scripts/eslint.config.ts、scripts/.prettierrc.json、scripts/.editorconfig。
  • scripts/：完整参考工程，也是目录结构、配置和基础源码的唯一权威来源。