vue-creater

Vue Web 构建器

数据流与上下文管理（重要）

你必须维护一个 会话上下文 来存储文件路径。在填充所需变量之前，不要继续后续步骤。

• $SKILL_DIR：此技能目录的绝对路径（vue-creater/SKILL.md 所在位置）。
• $PROJECT_ROOT：第 1 步中创建的项目的绝对路径。
• $DSL_PATH：第 2 步中生成的 dsl.json 文件的绝对路径（仅适用于默认模板工作流）。

重要：本文档中提及的所有脚本路径都是相对于 $SKILL_DIR 的。执行脚本时，始终使用完整路径：$SKILL_DIR/scripts/script-name.py

快速开始

步骤 0：选择项目类型

第一步——必须执行：你必须询问用户选择项目类型：

Please select the project type:

    1. **Default** (shadcn + tailwindcss + vite)
    2. **Nuxt Admin Dashboard** (shadcn + tailwindcss + nuxt)
    3. **Electron** (shadcn + tailwindcss + electron + vite)

    Choice [1/2/3]:

停止并等待用户输入——不要自动执行菜单项；接受数字、命令触发词或模糊命令匹配

根据用户输入采取行动：

• 如果选择“1”（默认）：

  1. 继续执行步骤 1，并遵循默认工作流（步骤 1-4）。

• 如果选择“2”（Nuxt Admin Dashboard）：

  1. 执行脚本：python3 $SKILL_DIR/scripts/setup_nuxt_dashboard.py [project-name]
     • 条件：如果上下文中指定了项目名称，将其作为参数传入。否则，省略此参数以使用默认名称。
  2. 捕获输出：在脚本输出中查找目录路径（成功消息前的最后一行）。
  3. 赋值：将此路径设为变量 $PROJECT_ROOT。
  4. 跳过所有剩余步骤——Nuxt 仪表盘已完成配置，可以立即使用。
  5. 告知用户运行：cd $PROJECT_ROOT && bun run dev
  6. 结束工作流——不要继续执行步骤 1-4。

• 如果选择“3”（Electron）：

  1. 执行脚本：python3 $SKILL_DIR/scripts/electron_vue_init.py [project-name]
     • 条件：如果上下文中指定了项目名称，将其作为参数传入。否则，省略此参数以使用默认名称。
  2. 捕获输出：在脚本输出中查找目录路径（成功消息前的最后一行）。
  3. 赋值：将此路径设为变量 $PROJECT_ROOT。
  4. 跳过步骤 1 和步骤 4——项目脚手架已搭建完成。
  5. 继续执行步骤 2，同步设计数据（DSL）。

---

默认模板工作流（选择 1）

要使用 Vue 生态系统构建功能强大的前端 claude.ai artifacts，请遵循以下步骤：

1. 使用脚本 $SKILL_DIR/scripts/shadcn_vue_init.py 初始化项目脚手架
2. 使用工具 get_dsl 获取设计数据
3. 使用工具 get_token 应用设计令牌和样式
4. 启动开发服务器

技术栈：

• 核心：Vue 3（Script Setup）+ TypeScript + Vite v8.0.0
• 样式：Tailwind CSS v4 + shadcn-vue（基于 Radix-vue）
• 状态与逻辑：Pinia（Store）+ Vue Router + TanStack Query（vue-query）

步骤 1：初始化项目脚手架

说明：

1. 执行脚本：python3 $SKILL_DIR/scripts/shadcn_vue_init.py [project-name]
   • 条件：如果上下文中指定了项目名称，将其作为参数传入。否则，省略此参数以使用默认名称。
2. 捕获输出：在脚本输出中查找目录路径（成功消息前的最后一行）。
3. 赋值：将此路径设为变量 $PROJECT_ROOT。
4. 验证：如果 $PROJECT_ROOT 为空，请停止并要求用户验证安装情况。

此脚本的功能：

• ✅ 搭建 Vue 3 + Vite 8.0.0
• ✅ 配置 Tailwind CSS 4（以 CSS 为先的配置方式，无通用配置 js）
• ✅ 安装 shadcn-vue 并配置 components.json
• ✅ 设置 Pinia、Vue Router 和 Vue Query 插件

步骤 2：同步设计数据（DSL）

你必须询问： 请选择设计源配置：

1. **自定义设计 DSL**（提供设计 token 的 URL 或文件路径）
2. **使用 TOKEN_URL_LIGHT**（从 .env TOKEN_URL_LIGHT 变量读取 DSL URL）
3. **使用默认值**（跳过设计 token，使用默认主题）

选择 [1/2/3]：

停止并等待用户输入——不要自动执行菜单项——接受数字、命令触发词或模糊匹配命令 从源获取设计结构和布局数据：

根据用户输入执行操作：

• 如果选择“1”（自定义）：

  1. 询问 URL（如果未提供）。
  2. 使用该 URL 执行 get_dsl。
  3. 捕获输出：查找已保存 JSON 的文件路径（例如 .../dsl.json）。
  4. 赋值：将此路径设置为变量 $DSL_PATH。

• 如果选择“2”（TOKEN_URL_LIGHT）：

  1. 检查 .env 文件是否存在：
     • 在当前工作目录或项目根目录中查找 .env 文件。
     • 如果 .env 文件不存在：
       • 停止并等待用户输入
       • 提示用户创建 .env 文件，并写入以下内容：

         TOKEN_URL_LIGHT=https://your-token-url.com/dsl.json
         

       • 说明应将 .env 文件放在哪里，以及需要设置的参数。
       • 等待用户确认已创建并配置 .env 文件。
  2. 确认 .env 文件存在后，从 .env 文件中读取 TOKEN_URL_LIGHT 变量。
  3. 如果 .env 中未定义 TOKEN_URL_LIGHT：
     • 停止并等待用户输入
     • 提示用户在 .env 文件中添加 TOKEN_URL_LIGHT=https://your-token-url.com/dsl.json。
     • 等待用户确认已添加该变量。
  4. 如果已定义 TOKEN_URL_LIGHT：使用 TOKEN_URL_LIGHT 中的 URL 执行 get_dsl。
  5. 捕获输出：查找已保存 JSON 的文件路径（例如 .../dsl.json）。
  6. 赋值：将此路径设置为变量 $DSL_PATH。

• 如果选择“3”（使用默认值）：

  1. 记录“正在使用默认主题，跳过 DSL 获取。”
  2. 赋值：将 $DSL_PATH 设置为空或 null，以表示没有自定义设计 token。

步骤 3：应用设计 Token

前提条件：

• 确保 $PROJECT_ROOT 已定义（来自步骤 1）。
• 确保 $DSL_PATH 已定义（来自步骤 2）。

说明： 现在必须使用之前捕获的确切路径调用 get_token 工具。

严格执行逻辑：

如果 $DSL_PATH 有效（用户选择了自定义）： 执行：get_token(project_path=$PROJECT_ROOT, dsl_path=$DSL_PATH)

否则（用户选择了默认值）： 记录“跳过默认主题的 token 应用。”

目标：从 $DSL_PATH 处的 DSL 文件提取设计 token，并将其注入 $PROJECT_ROOT 中的 Tailwind 4 配置。

步骤 4：启动开发服务器

说明：

1. 立即执行以下命令。
2. 重要：必须使用链式命令格式（&&），以确保保留目录上下文。

cd "$PROJECT_ROOT" && bun run dev

注意：该项目使用 bun 作为包管理器，以加快依赖项安装和开发服务器启动速度。

脚本参考

shadcn_vue_init.py

位置：$SKILL_DIR/scripts/shadcn_vue_init.py

用法：

python3 $SKILL_DIR/scripts/shadcn_vue_init.py [project-name]

功能：

• 创建 Vue 3 + Vite 8.0.0 项目
• 使用 CSS 优先配置方式配置 Tailwind CSS 4
• 安装并配置 shadcn-vue 组件
• 设置 Pinia、Vue Router 和 TanStack Query
• 安装 Zod 以进行 schema 验证
• 安装 VueUse 以提供组合式工具
• 创建工具文件（lib/utils.ts、composables/useApi.ts）
• 生成完整的 README.md
• 清理不必要的模板文件

setup_nuxt_dashboard.py

位置：$SKILL_DIR/scripts/setup_nuxt_dashboard.py

用法：

python3 $SKILL_DIR/scripts/setup_nuxt_dashboard.py [project-name]

功能：

• 从 zip 文件中提取预配置的 Nuxt 3 管理仪表板模板
• 包含 Shadcn UI 组件和 Tailwind CSS 配置
• 使用 bun 安装所有必需的依赖项
• 提供可直接使用的管理仪表板结构

参考

• shadcn-vue：https://www.shadcn-vue.com/
• Tailwind CSS v4：https://tailwindcss.com/docs/v4-beta（以 CSS 为核心的配置）
• Vite：https://vitejs.dev/