你的第一个 Ionic 应用

系统设置

我喜欢在我的主目录中创建一个名为“git”的文件夹。你可以根据自己的喜好命名，比如“projects”、“myprojects”或“ionic”，完全由你决定！

在开始 Ionic 项目之前，请务必确保已安装最新版本的工具链。稍后你会明白原因。要检查是否有可用更新，请在任意命令行终端中输入以下命令：

1npm install -g @ionic/cli@latest

在指定的终端中运行上述命令，观察输出结果。

不出所料，这将确保你获得当前最新的版本。

Ionic 应用向导

在本课程的后续内容中，我将主要使用命令行操作，但 Ionic 提供了一个基于网页的快速构建 Ionic 项目的工具，称为 Ionic App Wizard。

在上方的终端中输入以下命令来启动向导：

1ionic start myApp

1. 查看该向导提供的项目类型。输入项目名称，选择一种颜色，并选择侧边菜单模板。默认会使用 React，因此请务必选择 Angular。

2. 接下来，系统会询问项目类型，请从提供的选项中选择 sidemenu。

3. 在下一页，你可以选择登录已有账户或创建新账户，也可以选择跳过此步骤直接获取结果。

4. 向导会为你提供一条自定义的 Ionic CLI 安装命令，并提醒你必须使用 Ionic CLI 6.3 或更高版本，这通常不是问题，但这也正是我始终建议保持工具链为最新版本的原因。

5. 回到你的终端，运行 Ionic App Wizard 提供的命令并等待完成。它会执行 npm install，然后你需要通过输入以下命令进入该项目目录：

   1cd myApp

6. 可以使用以下命令启动应用：

   1ionic serve

   不过，我们已经将生成的应用程序提供在下面的代码沙箱中，当你点击 Run 按钮时，ionic serve 命令会自动运行并启动应用。

完成上述步骤后的完整应用程序如下所示。点击 Run 按钮以编译应用并查看运行效果。

如果你本地运行，应用应会自动在默认浏览器中打开。该应用看起来像一个邮箱界面。

大功告成！你刚刚从零开始创建了一个应用。在下一课中，我将对生成的代码进行详细讲解。

测验