uni-app-x项目创建器Skill：一条指令搭好 Vue 3 + TypeScript + Vite 的项目骨架
- 它是什么：一个专注于「uni-app-x 项目从零创建」的 AI 技能，把官方安装指南、快速入门、项目类型说明、目录结构模板与 CLI 命令模板打包成结构化知识，让 AI 助手直接输出可用的项目骨架。
- 解决什么痛点：uni-app-x 强制要求 Vue 3 + TypeScript + Vite，环境配置、manifest.json、pages.json、tsconfig.json 的初始化对新手最容易出错，本技能把这套流程标准化。
- 怎么用：安装后在对话里说一句「用 TypeScript 创建一个 uni-app-x 项目」，技能会自动识别项目类型（标准项目 / HBuilderX / CLI），并加载对应的示例与模板文件。
- 核心价值：把「查文档半小时、配置一小时」压缩成一次对话，减少脚手架阶段的返工，同时天然遵循官方推荐的项目结构与最佳实践。
- 适合谁：准备入局 uni-app-x 的个人开发者、需要快速起 Demo 的产品与外包团队、以及要给团队统一项目模板的技术负责人。
该技能叫什么？如何一键安装 AI 技能提升开发效率？
技能中文名：uni-app-x项目创建器Skill 技能英文名：uniappx-project-creator 技能ID：12639
它解决的是「项目创建阶段」的问题，而不是组件与 API 的使用问题。按技能自身的说明，它专注于项目创建和初始化；如果需要查询组件与 API 用法，应参考配套的 uniappx-project-guide。换句话说，它的边界很清晰：从「我想做一个 uni-app-x 项目」到「项目结构已经生成、配置已经就位」这一段路，由它负责铺平。
「一键安装」的思路
AI 技能本质上是一份带 SKILL.md 说明的结构化能力包，安装并不需要编译或打包，本质是「把技能目录放到 AI 助手能读到的位置，然后让它识别到」。通常思路如下：
- 准备前置条件：一个支持「技能（Skill）」机制的 AI 编程客户端或 IDE 插件；本机已安装 Node.js 与包管理器（用于后续真正跑起项目）；如需在 HBuilderX 中调试，则额外准备 HBuilderX。
- 获取技能包：从技能市场、技能仓库或团队内部分发渠道拿到
uniappx-project-creator技能目录。该目录中的关键内容是SKILL.md（技能说明）、examples/guide/（安装指南、快速入门、项目类型）与templates/（项目结构模板、CLI 命令模板）。 - 放入技能目录并启用：把整个目录放进客户端的技能存放路径，在设置中启用该技能。不同客户端的路径与入口不一样，具体安装命令与目录位置以官方说明为准。
- 验证是否生效：新建一段对话，输入「帮我用 TypeScript + Vue 3 创建一个 uni-app-x 项目」。如果技能已生效，回复中应当出现「项目类型判断」「加载安装/快速入门文档」「按模板生成目录结构」这类动作，并给出 manifest.json、pages.json、tsconfig.json 的配置建议，而不是泛泛而谈的通用脚手架回答。
- 运行验证：按生成结果执行安装依赖与启动命令（该技能会从
templates/cli-commands.md读取对应的 CLI 命令模板，实际命令请以官方文档为准），能正常拉起项目即代表闭环完成。
安装这一步最容易踩的坑是「技能装了但没启用」。如果对话里 AI 仍然给出与 uni-app-x 无关的 Vue 3 通用建站方案，说明技能没有被加载，可以检查目录层级是否多套了一层文件夹。
该技能的主要功能和特点
- 一句话创建项目：当你说「一句话创建」或「快速启动」时，技能会走一键创建路径，直接给出项目结构与初始化步骤，而不是先反问一堆问题。
- 项目类型智能识别：根据你的描述自动分流为三类——标准 uni-app-x 项目（TypeScript + Vue 3 模板）、HBuilderX 项目（走 HBuilderX 创建流程）、CLI 项目（走官方 CLI 命令），避免「用错方式建项目」这种最常见的方向性错误。
- 按需加载知识文件，而非一次性灌输：技能会从
examples/guide/读取installation.md（安装与环境设置）、quick-start.md（快速入门）、project-types.md（项目类型与模板），从templates/读取project-templates.md（带 TypeScript 的完整结构模板）与cli-commands.md（CLI 命令模板）。这种设计让回复更聚焦，不容易跑偏。 - 配置文件一步到位：manifest.json、pages.json、tsconfig.json 三个「新手杀手」配置由技能按模板生成，减少手写 JSON 的语法与字段错误。
- 内建最佳实践：技能明确要求使用 TypeScript 并正确定义类型、使用 Vue 3 组合式 API 与
<script setup>语法、遵循标准 uni-app-x 目录结构、项目创建后初始化 git 仓库。这些约束会体现在生成结果里，而不是靠你事后补救。 - 与通用代码助手的差别：普通 AI 助手也能「编」出一个 uni-app-x 项目结构，但结构和配置往往是想象出来的；本技能的价值在于把官方文档中的安装流程、项目类型、目录规范固化进上下文，输出更贴近官方推荐形态。
如何使用该技能？
以下是一套可直接照做的使用路径。
第 1 步：明确你要建哪种项目 先用一句话交代清楚目标形态，例如：
- 「我要从零创建一个标准的 uni-app-x 项目，使用 TypeScript + Vue 3。」→ 走标准模板
- 「我想在 HBuilderX 里创建 uni-app-x 项目。」→ 走 HBuilderX 流程
- 「用官方 CLI 创建一个 uni-app-x 项目。」→ 走 CLI 命令
第 2 步：发出创建指令（输入示例）
用一句话帮我创建一个 uni-app-x 项目，要求：TypeScript + Vue 3 + Vite，首页包含一个计数器组件，创建完成后初始化 git 仓库。
第 3 步：确认技能的动作 一次合格的响应通常会包含：项目类型判断结论 → 引用的指南（安装 / 快速入门 / 项目类型）→ 项目目录结构 → 关键配置文件内容 → 下一步执行命令。
第 4 步：检查输出（输出说明） 重点核对四件事：
- 目录结构是否符合 uni-app-x 标准组织方式；
- manifest.json 与 pages.json 是否成对出现、页面路径是否与目录一致；
- tsconfig.json 是否与 TypeScript 使用方式匹配；
- 组件是否使用了
<script setup>组合式 API 写法。
第 5 步：落地运行 按项目生成结果安装依赖并启动，在 HBuilderX 或 CLI 环境下分别验证。命令以技能给出的模板与官方文档为准（官方快速开始：https://uniapp.dcloud.net.cn/quickstart-cli.html ，uni-app-x 文档：https://doc.dcloud.net.cn/uni-app-x/ ）。
第 6 步：继续扩展 项目骨架建好后，可以继续追问「新增一个页面并注册到 pages.json」「把首页拆成组件」等，技能会沿用同一套结构约定继续产出，保持风格一致。
同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| uni-app-x项目创建器Skill（本技能） | 对话式项目初始化助手 | 项目类型识别、目录结构生成、manifest.json/pages.json/tsconfig.json 配置、按模板出 CLI 命令 | 需支持技能机制的 AI 客户端；零代码基础也可用 | 快速起步、教学演示、统一团队模板 | 优势：一句话出骨架、内建最佳实践、边界清晰；不足：只管创建与初始化，组件与 API 细节需配合其他技能或文档 |
| HBuilderX 可视化创建 | 官方 IDE 内置创建向导 | 图形化新建项目、内置运行与调试 | 需下载安装 HBuilderX | 习惯 IDE 开发、需要真机调试 | 优势：官方原生、所见即所得；不足：依赖 IDE，跨工具链协作与自动化程度较低 |
| uni-app-x 官方 CLI 手动搭建 | 官方命令行脚手架 | 按文档逐步初始化项目与配置 | 需熟悉命令行与配置项 | 有经验的开发者、CI 场景 | 优势：可控性最强；不足：步骤多、易漏配置，新手排查成本高 |
| 通用 AI 编码助手的自由生成 | 通用代码生成 | 可生成任意框架代码 | 门槛低 | 探索性尝试 | 优势：灵活；不足：缺少官方文档约束，容易生成不存在的配置字段或错误目录结构 |
该技能的典型应用场景与实际体验情况
场景一：独立开发者的第一个 uni-app-x 项目 角色：刚从前端转型跨端开发的同学。痛点是「文档能看懂，但不知道先建什么文件、manifest.json 里该写什么」。使用方式是把需求一句话抛给技能，拿到目录结构与三份配置文件后再逐个理解。实际体验：上手门槛极低，回复结构清晰，能明显减少「建完跑不起来」的挫败感；注意点是仍要自己动手跑一遍命令，不能只看不练。
场景二：外包/创业团队的快速原型 角色：需要在一两天内出可演示 Demo 的团队。痛点是从零搭架子的时间被压缩到几乎没有。使用方式是让技能生成标准 TypeScript 模板并直接初始化 git 仓库，团队再在骨架上并行开发页面。实际体验：骨架一致性很好，多人协作时不会出现「你的目录和我的目录不一样」；注意点是原型阶段要克制，不要在 manifest.json 里堆未验证的配置。
场景三：团队统一项目规范 角色：技术负责人。痛点是每个人建的项目结构各异，Code Review 成本高。使用方式是把本技能作为「默认起手式」写入团队规范，新人入职第一步就是用它生成项目。实际体验：规范落地成本极低，因为它引用的是官方结构与最佳实践；注意点是团队需要约定统一的命名与分支策略。
场景四：教学与技术分享 角色：讲师或内容创作者。痛点是演示环境搭建占用大量直播时间。使用方式是提前用技能生成模板，直播时现场「一句话创建」演示。实际体验：可复现性强，观众照着做成功率高；注意点是演示前要确认客户端已启用技能。
该技能能为用户带来的价值
效率层面：把项目创建从「翻文档 + 手写配置 + 反复排错」收敛为一次对话。原本需要半小时到一小时的初始化流程，熟练后可在几分钟内拿到可运行骨架，省下的时间直接投入到业务页面与组件开发上。
门槛层面：uni-app-x 要求 Vue 3 + TypeScript + Vite，这三者的组合对新手并不友好。技能通过模板把「该用什么语法、该配哪些文件」变成默认选项，让不熟悉 TypeScript 的开发者也能起步于一个正确结构，而不是先踩一遍坑再回到起点。
质量层面：内建最佳实践（组合式 API 与 <script setup>、类型定义、标准目录、git 初始化）意味着项目从第一天就具备可维护性，减少后期重构成本。
长期价值：项目骨架是最容易被复制也最容易被做错的资产。用一个稳定、可复现的创建流程，团队的项目起点就统一了，后续无论是接入 CI、做代码规范检查还是接手他人项目，摩擦都会小很多。
常见问题 FAQ
Q1：怎么安装这个技能？需要写代码吗？
A：不需要写代码。把 uniappx-project-creator 技能目录放进你所使用的 AI 客户端的技能目录并在设置中启用即可，随后在对话里描述建项目需求。不同客户端的目录位置与启用入口不同，具体以官方说明为准。验证方式是看回复中是否出现项目类型判断与模板化的目录结构。
Q2：这个技能收费吗？ A：技能本身在说明中标注了许可证条款「完整条款在 LICENSE.txt 中」，具体授权范围请以技能包内的 LICENSE.txt 与官方发布渠道说明为准。它所引用的 uni-app-x、HBuilderX、Vue 3、TypeScript 均为各自官方提供的产品与文档。
Q3：它和 HBuilderX 自带的「新建项目」有什么区别？ A：HBuilderX 的向导是图形化的，适合习惯 IDE 的人；本技能是对话式的，优势在于能一次输出目录结构、manifest.json、pages.json、tsconfig.json 以及后续命令，并且能按你的描述自动在「标准项目 / HBuilderX / CLI」三条路径中分流。两者也可以配合：用技能出结构，用 HBuilderX 跑调试。
Q4：它能不能帮我写页面和组件？
A：它的定位是项目创建与初始化，会按模板生成带 TypeScript 与 Vue 3 组合式 API 的初始页面与组件骨架。更细的组件用法与 API 参考不在本技能范围内，技能说明中已明确指向配套的 uniappx-project-guide。
Q5：适合谁用？完全的新手可以吗？ A：适合正在或准备使用 uni-app-x 的开发者、需要快速出 Demo 的团队，以及要统一项目模板的技术负责人。完全新手可以用它拿到正确起点，但仍建议对照官方文档（https://doc.dcloud.net.cn/uni-app-x/ ）理解每个配置文件的含义，这样后续排错才不会卡住。