Ionic 安装

在本节中，我们将学习如何设置环境以成功开发 Ionic 应用程序。

Ionic 的先决条件

1. Node.js 和 NPM
2. 代码编辑器
3. Ionic CLI

安装 Node.js 和 NPM

Node.js 和 NPM 是开发 Ionic 应用程序所需的基础平台。您可以通过下面给出的链接安装 Node.js 和 NPM 包管理器。

在 Windows 上安装 Node.js：点击这里

在 Linux 上安装 Node.js：点击这里

要验证 Node.js 和 NPM，请使用下图所示的以下命令。

代码编辑器

VS Code 编辑器是创建 Ionic 应用程序的最佳代码编辑器。 它是 Microsoft 制造的流行且免费的文本编辑器。

您可以下载并安装 VS Code 点击这里

还有许多其他可用于创建 Ionic 应用程序的代码编辑器，例如

• Ionic Studio： 这是创建 Ionic 应用程序的最快和最简单的方法。
• Atom： 这是一个由 GitHub 开发的可破解的文本编辑器。
• WebStorm： 这是一个由 JetBrains 开发的强大的非免费编辑器。

Ionic CLI

我们可以通过 Ionic 命令行实用程序创建和开发 Ionic 应用程序。 Ionic CLI 是安装 Ionic 的首选方法。 它是运行应用程序并将其连接到其他服务（如 Ionic AppFlow）的主要工具。

要使用 NPM 在全局范围内安装 Ionic CLI，请在终端窗口中输入以下命令。

当 Ionic 成功安装到您的系统上时，您将获得以下屏幕。

创建应用

成功安装后，您可以构建 Ionic 应用程序。 要创建 Ionic 应用程序，您需要导航到要存储应用程序的位置。 因此，首先，转到终端窗口并执行以下命令。

每当您运行上述命令时，它都会要求您编写项目名称。 现在，输入您的项目名称，然后按回车键。 您将获得以下屏幕。

在此屏幕中，您将看到不同类型的模板。 在这里，您可以根据需要选择任何模板。 我们可以了解各种类型的模板，如下所示

选项卡应用

如果您选择选项卡模板，则 Ionic 应用程序包含选项卡菜单、标题以及一些有用的屏幕和功能。 它是默认的 Ionic 模板。 以下命令创建选项卡应用。

侧边菜单应用

如果您选择侧边菜单模板，它只会将带有导航的侧边菜单添加到应用程序的内容区域中。 以下命令创建侧边菜单应用。

空白应用

它是一个空白启动器项目或一个空项目。 以下命令创建空白应用。

第一个 Ionic 应用

在这里，我们将从空白模板开始项目。 要启动空白 Ionic 应用程序，请在终端窗口中执行以下命令。 它将安装所有需要的依赖项，例如 Angular 或 Ionic 依赖项。

现在，您需要导航到您新创建的项目并使用以下命令运行它。

当您运行上述命令时，您的终端窗口看起来像下图。

完成所有步骤后，您将在浏览器中获得输出，您可以在下图中看到。

现在，打开 chrome 开发者工具或按 ctrl+shift+I。 在此工具中，当您单击切换设备工具栏时，您将获得以下屏幕。

接下来，如果您想更改应用程序中的任何内容或修改任何内容，则需要一个代码编辑器或 IDE 来编写代码。 在这里，我们将使用 Visual Studio Code Editor，这是一个用于 Web 开发的免费 IDE。

在 VS Code 中打开项目

打开 Visual Studio Code Editor，转到菜单栏，单击文件->打开文件夹，然后选择您的项目。 在 Visual Studio Code 中，会出现以下屏幕。

安装 Angular Essential 扩展

要安装 Angular Essential 扩展，请转到 视图->扩展 或按 ctrl+shift+x。 现在在搜索框中键入 Angular Essential，您将在 Visual Studio 编辑器中获得以下屏幕。 单击安装。

完成安装后，转到项目资源管理器，该资源管理器出现在 Visual Studio Code 编辑器的左侧。 现在，打开 home.page.html 文件并编写以下代码。

接下来，打开 home.page.ts 文件并编写以下代码。

现在，保存该文件并在终端中运行该项目。 您将在浏览器窗口中获得以下输出。

当您单击 更改文本 按钮时，它看起来像下图。