你的第一个 Ionic 应用

现在我们已经熟悉了 Ionic 背后的核心技术，并了解了它们的作用，接下来我们将使用 Ionic 框架来创建一个项目。

创建新项目

Ionic 提供了命令行工具，可以轻松地创建新项目。使用以下命令即可：

1ionic start blank-app blank --type=angular

通过该命令，我们调用 Ionic CLI 工具创建一个名为 blank-app 的项目，使用空白模板，并指定 Angular 作为开发框架（Capacitor 在新的 Ionic 项目中默认安装）。

请在下方提供的终端中输入此命令，亲自查看执行结果。

你会看到终端中输出项目的构建进度，具体完成时间取决于你的网络速度。

当终端出现提示时，请根据需要进行回答，但大多数情况下你只需稍作等待、放松即可。

项目创建步骤

项目创建完成后，你会发现 Ionic CLI 的整个流程包含以下几个步骤：

1. 定义项目名称、模板类型以及所使用的框架
2. 安装新项目所需的 Node.js 包
3. 提示是否安装 Ionic Appflow SDK
4. 配置项目的初始 Git 集成
5. 生成项目应用目录下的各个源文件
6. 提供下一步可选操作的提示

在整个过程中，安装 Node.js 包耗时最长，因此你可能需要耐心等待这一阶段完成。

项目创建完毕后，通常我们会进入新生成的项目目录，然后执行以下一项或多项任务：

• 安装必要的原生平台（iOS 和 Android）
• 安装 Awesome Cordova 插件、Capacitor 插件，或 Angular 及第三方库
• 生成自定义页面组件、服务、指令、管道、接口和功能模块
• 为 iOS 或 Android 生成启动图标和闪屏页

后续章节将详细介绍如何完成上述任务，所以即使现在感觉内容较多也不必担心，很快你就能熟练掌握！

模板类型

除了空白模板外，Ionic 还提供了多种项目模板供选择。

标签页（Tabs）

该模板用于创建一个包含三个标签页的简单界面。

使用标签页模板创建名为 myApp 的项目的命令如下：

1ionic start myApp tabs

侧边菜单（Side menu）

该模板创建的项目包含一个用于导航的侧边菜单。

使用侧边菜单模板创建名为 myApp 的项目的命令如下：

1ionic start myApp sidemenu

列表（List）

该模板创建的项目在内容区域中显示一个条目列表。

使用列表模板创建名为 myApp 的项目的命令如下：

1ionic start myApp list

如果你不确定该使用哪些命令，或如何通过命令行配置项目，可以直接运行 ionic start 命令。Ionic CLI 将提供交互式提示，引导你完成创建过程。

其他常用命令

接下来，我们来看一些在开发过程中最常使用的 Ionic CLI 命令。

Cordova 相关命令

可以使用以下命令添加 Cordova 插件所依赖的平台。注意：当你生成特定平台的构建时，平台也会被自动添加。

1ionic cordova platform add ios
2ionic cordova platform add android 

使用以下命令在已连接的 iOS 或 Android 设备上运行 Ionic Cordova 应用：

1ionic cordova run ios
2ionic cordova run android

以下命令用于为 iOS 准备并编译 Cordova 应用：

1ionic cordova build ios --prod

类似地，以下命令用于为 Android 准备并编译 Cordova 应用：

1ionic cordova build android --prod --release

注意：--prod 标志用于 AoT（Ahead of Time，预编译），而 --release 标志表示生成发布版本。

以下命令打印当前系统环境的详细信息：

1ionic info

通过以下命令安装 Cordova 插件：

1ionic cordova plugin add <plugin-name>
2npm install --save @ionic-native/<plugin-name>

注意：每个插件都需要执行这两条命令。

使用以下命令移除已安装的 Cordova 插件：

1ionic cordova plugin rm <plugin-name>

最后，以下命令列出所有已安装的 Cordova 插件：

1ionic cordova plugin ls

Capacitor 相关命令

要创建一个新的空白 Ionic/Capacitor 项目，请使用以下命令：

1ionic start nameOfProject blank

如果想为已有的 Ionic 项目添加 Capacitor 集成，可以使用以下命令：

1cd nameOfProject
2ionic integrations enable capacitor

通过以下命令初始化 Capacitor：

1npx cap init <app-name> <app-id>

注意：请将 <app-name> 替换为应用名称，<app-id> 替换为应用的反向域名标识符，例如 com.masteringionic.app-name。

使用以下命令添加平台：

1ionic build
2npx cap add ios
3npx cap add android

注意：必须先构建 Ionic 项目，才能添加平台。

其他常用命令

使用以下命令为应用添加一个页面：

1ionic g page pages/page-name

注意：可以在页面名前加上目录路径（如本例所示），但这不是必需的。

类似地，可以使用以下命令添加组件、服务、管道和指令：

1ionic g component components/component-name
2ionic g service services/service-name
3ionic g pipe pipes/pipe-name
4ionic g directive directives/directive-name

使用以下命令可在浏览器中预览应用在不同平台（包括 iOS、Android 和 Windows）上的效果：

1ionic serve --lab

运行应用

从项目根目录运行 Ionic 应用的命令是：

1ionic serve

该命令会启动 Ionic CLI 内置的开发服务器，使我们能够在网页浏览器中预览应用。现在就运行下面这个空白 Ionic 项目，看看实际效果吧！