关于 ionic-app-creation
这项技能指导开发者使用 Ionic CLI 创建 Ionic 应用，涵盖项目选项、框架设置，以及可选的 Capacitor 和 Tailwind CSS 集成，并从脚手架搭建到基础验证。
主要功能
- 01选择项目名称与框架
- 02选择起始模板
- 03使用 Ionic CLI 搭建应用
- 04可选集成 Capacitor
- 05可选配置 Tailwind CSS
- 06使用 ionic serve 验证应用
适用场景
- 01基于起始模板创建 Ionic 应用
- 02选择 Angular、React 或 Vue 配置
- 03搭建集成 Capacitor 的应用
- 04为 Ionic 项目添加 Tailwind CSS
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/ionic-app-creation确认已加载。
附带文件references/tailwind-css-setup.md
详细介绍
Ionic 应用创建
使用 Ionic CLI 创建新的 Ionic 应用——项目脚手架、框架集成（Angular、React、Vue）、Capacitor 集成和 Tailwind CSS 设置。
前置条件
- 已安装 Node.js（最新 LTS 版本）。
- 已全局安装 Ionic CLI（
npm install -g @ionic/cli）。如果尚未安装，请在此流程中安装。 - iOS 开发：已安装 Xcode。
- Android 开发：已安装 Android Studio。
Agent 行为
- 创建前先询问。 运行
ionic start之前，先向用户收集所有配置选项。清楚地列出可用选项，并等待用户确认。 - 一次只做一个决定。 某一步需要用户输入时，只提出一个问题，等待用户回答后再继续。
- 清楚地列出选项。 提供具体选项（例如：“要使用哪个框架：Angular、React 还是 Vue？”），而不是开放式问题。
- 逐步引导。 每次只引导用户完成一个步骤。切勿一次提出多个无关问题。
流程
步骤 1：验证 Ionic CLI
检查是否已安装 Ionic CLI：
ionic --version
如果命令执行失败或找不到命令，请安装：
npm install -g @ionic/cli
如果用户安装了旧版 ionic 包，请先卸载：
npm uninstall -g ionic
npm install -g @ionic/cli
步骤 2：收集项目配置
创建应用前，按顺序一次只问一个问题，向用户询问以下内容。对每个问题都列出可用选项和默认值。
2.1：项目名称
询问用户项目名称。该名称将决定目录名称和项目标识符。
- 示例：
my-app
2.2：框架
询问用户要使用哪个 JavaScript 框架：
--type 值 | 框架 |
|---|---|
angular | Angular（NgModules） |
angular-standalone | Angular（独立组件） |
react | React |
vue | Vue |
默认值：angular。
2.3：起始模板
询问用户要使用哪个起始模板：
| 模板 | 说明 |
|---|---|
blank | 仅包含一个页面的空项目 |
tabs | 基于标签页的布局 |
sidemenu | 基于侧边菜单的布局 |
用户也可以运行 ionic start --list，查看所选框架的所有可用模板。
默认值：blank。
2.4：Capacitor 集成
询问用户是否要集成 Capacitor：
--capacitor— 集成 Capacitor（建议用于原生移动应用）。
默认值：是（包含 --capacitor）。
2.5：Package ID
如果选择了 Capacitor 集成，询问用户使用反向 DNS 格式的包标识符：
--package-id=<id>— 例如，com.example.myapp
这会为 iOS 和 Android 设置应用的包 ID。
2.6：其他选项
告知用户以下其他标志，并询问是否要应用其中任何一项：
| 标志 | 说明 |
|---|---|
--no-deps | 创建项目后跳过 npm 依赖项安装 |
--no-git | 不初始化 Git 仓库 |
--project-id=<slug> | 自定义目录名称和包名称所用的 slug |
默认值：不应用这些标志。
步骤 3：创建应用
根据收集到的配置组装 ionic start 命令并运行：
ionic start <name> <template> --type=<framework> --capacitor --package-id=<package-id>
示例：
ionic start my-app blank --type=angular-standalone --capacitor --package-id=com.example.myapp
等待命令执行完成。Ionic CLI 会安装依赖项并生成项目脚手架。
步骤 4：验证项目
进入项目目录并验证项目是否已正确创建：
cd <name>
ionic serve
如果 ionic serve 启动开发服务器时没有报错，则表示项目已成功创建。验证后停止服务器。
步骤 5：设置 Tailwind CSS（可选）
询问用户是否要在项目中添加 Tailwind CSS。
如果要添加，请阅读 references/tailwind-css-setup.md，并根据用户选择的框架应用 Tailwind CSS 配置。
步骤 6：继续设置 Capacitor
如果在步骤 2.4 中选择了 Capacitor 集成，请告知用户已创建基础 Ionic 应用并集成了 Capacitor。ionic start --capacitor 命令已安装 @capacitor/core、@capacitor/cli，并创建了 capacitor.config.ts。切换到 capacitor-app-creation 技能，并从步骤 5（构建 Web 应用）继续，添加原生平台、同步、运行应用并配置可选集成（实时更新、CI/CD）。
如果未选择 Capacitor，则此技能已完成。
错误处理
ionic: command not found：未全局安装 Ionic CLI。运行npm install -g @ionic/cli。- 全局安装时出现权限错误：用户可能需要配置 npm，以便无需提升权限即可全局安装；也可以使用
sudo npm install -g @ionic/cli。 ionic start因网络错误而失败：检查互联网连接。CLI 会从 GitHub 下载起始模板。ionic start因“目录已存在”而失败：已存在一个与所选项目名称相同的目录。请改用其他名称，或删除现有目录。ionic serve因端口冲突而失败：另一个进程正在使用端口 8100。停止冲突进程，或运行ionic serve --port=<other-port>。- 依赖安装失败：在项目目录中手动运行
npm install。如果仍然失败，请检查是否存在 Node.js 版本兼容性问题。 - 找不到模板：运行
ionic start --list，查看所选框架的所有可用模板。用户可能拼错了模板名称。
相关技能
capacitor-app-creation— Ionic 应用创建后继续设置 Capacitor（添加平台、实时更新、CI/CD）。ionic-app-development— Ionic 开发通用指南。ionic-angular— Angular 专属的 Ionic 模式。ionic-react— React 专属的 Ionic 模式。ionic-vue— Vue 专属的 Ionic 模式。capawesome-cloud— 使用 Capawesome Cloud 设置实时更新、原生构建和应用商店发布。