你的第一个 Ionic 应用
了解如何配置系统并创建一个 Ionic-React 项目。
配置系统环境
在开始一个 Ionic 项目之前,我总会确认自己已安装了最新版本的工具链,即使最近才安装过。我也建议你这么做。在任意命令行终端中执行以下命令:
1npm install -g @ionic/cli@latest
请在下方终端中运行上述命令以查看输出结果。
不出所料,这将确保你获取到当前最新的版本。
Ionic 应用向导
这些步骤为可选操作。我们已在下方可运行环境中为你完成了这些步骤,只需点击运行按钮即可查看结果。
在本课程的后续部分,我将主要使用命令行进行操作。但 Ionic 也提供了一个基于网页的快速构建工具,称为 Ionic 应用向导(Ionic App Wizard)。
现在就来尝试一下,看看它能生成什么样的项目。打开浏览器访问 https://ionicframework.com/start,输入项目名称,选择一种颜色,并选用侧边菜单模板。该页面默认使用 React 框架。
在下一个界面中,登录或创建一个账户。
应用向导会为你生成一条用于 Ionic CLI 的自定义安装命令,并提示你需要至少安装 Ionic CLI 6.5.0 或更高版本(以本课程编写时为准)。这通常不会成为问题,但仍然建议你保持使用最新版本。

回到你的终端,运行 Ionic 应用向导提供的命令并等待执行完成。该命令会自动运行 npm install,之后你需要使用 cd 命令进入生成的项目目录。
接着运行以下命令启动应用:
1ionic serve
完成上述步骤后,完整的应用程序已在下方提供,供你查看效果。运行以下示例以验证命令输出结果。
No configuration found for ID: 7ee718ac130acc76964f59bcc6aa829465e270b92ff97c949b0e3f5e209cc777
如果你在本地运行此命令,应用应会自动在默认浏览器中打开。生成的应用看起来像一个邮箱界面。瞧!你刚刚凭空创建出一个应用。在下一课中,我们将回顾它生成的代码。
小测验
Quiz
Ionic CLI 提供的 custom-install 命令的格式是什么?