Ionic入门教程从零开始

所以你听说过 ionic 并且想知道如何开始？在本教程中，您将学习如何在您的计算机上设置 Ionic 开发环境，以及如何创建 Ionic 项目。 

编写 Ionic 应用程序的要求

好吧，恭喜，如果您是通过计算机查看本文，那么您拥有开发 Ionic 应用程序的最重要的先决条件之一：您将需要一台物理个人计算机 (PC) 来执行此操作。这可以是运行 Windows、mac或 Linux 的计算机。

由于我们使用 Web 技术构建 Ionic 应用程序，因此您还需要安装 Web 开发工具。这包括用于运行和调试我们的应用程序的网络浏览器（最好是 Google chrome），以及用于编写和编辑我们的代码的文本编辑器（例如 Sublime、Atom 或 Visual Studio Code）。如果您是开发新手，我会推荐Visual Studio Code，因为它常用且免费。

在您的计算机上安装了这些基本要求后，让我们继续安装构建 Ionic 应用程序所需的依赖项。

设置依赖项并安装 Ionic

不幸的是，没有一个安装程序包可以自动在您的计算机上安装 Ionic 开发环境。无论您的操作系统是什么，您都必须手动安装每个必需的依赖项。因此，让我们继续开始设置我们的 Ionic 开发环境。

安装节点.js

我们需要安装的第一个依赖项是node.js ，它是一个服务器端javascript框架。我们将使用 Node.js 作为其节点包管理器 (npm)，这将允许我们安装项目所需的所有包和工具。我们还将使用 Node.js 运行开发服务器服务，让我们在浏览器中预览应用程序。

Ionic 建议，在安装 Node.js 时，您应该选择最新的长期支持 (LTS) 版本。就我而言，正如您在上面看到的，那是 8.9.1 LTS 版本。Ionic 建议使用 LTS 版本，因为它们更稳定。

因此，只需下载 LTS 版本，按照安装程序说明进行操作，安装完成后，您就可以继续下一步了。

安装 cordova 和 Ionic

安装 Node.js 后，您现在可以安装 Cordova 和 Ionic。对于某些人来说，这可能会有些棘手，尤其是那些以前从未使用过命令行界面 (CLI) 的人。一开始可能看起来有点令人生畏，您可能会觉得自己最终会破坏您心爱的计算机上的某些东西！好吧，你不会的，所以请放松并尝试跟随。

在 Mac和 Linux 上，搜索 Terminal，这是我们将用来安装 Cordova 和 Ionic 的 CLI。在 Windows 上，搜索命令提示符。这相当于 Windows PC 上的终端。

在 Mac 和 Linux 上安装

在 Mac 或 Linux 上打开终端后，键入以下命令并按键盘上的Enter 键运行它。

sudo npm install -g cordova ionic

此后，系统可能会提示您输入密码，如果是这样，请输入您用于登录计算机的密码，然后再次按Enter。

在 Windows 上安装

在 Windows 上的命令提示符中，键入以下命令并按键盘上的Enter 键运行它。

npm install -g 科尔多瓦离子

您可能已经注意到，我们使用 Node Package Manager (npm) 来安装上面的 Ionic 和 Cordova，因此首先安装 Node.js 至关重要！您可能还注意到，在 Mac 和 Linux 上sudo，我们在命令前面使用。这是允许在这些系统上全局安装 Ionic 和 Cordova 所必需的。

安装过程可能需要几分钟，具体取决于您的互联网连接，但一旦完成，您应该会看到如下内容：

很酷，所以在成功安装 Ionic 和 Cordova 之后，让我们继续下一部分并安装其他软件，我们将需要从 Ionic 项目成功构建我们的ios和android应用程序。

特定于平台的设置

您不必现在就安装这些软件工具；您可以使用我们之前讨论过的 Web 技术继续构建 Ionic 应用程序。因此，如果您想直接进入并创建您的第一个 Ionic 项目，请随意跳过这一部分。 

但是，如果您想在 Android 手机或iphone等真正的移动设备上运行您的应用程序，您最终必须为这些平台安装特定于平台的工具。在以后的教程中，我们将更仔细地研究 Android 和 iOS 设备的开发。

Android 应用程序的设置

如果您希望能够从您的 Ionic 项目编译 Android 应用程序，您需要首先安装 java Development Kit (JDK) 8 或更高版本。访问 JDK 网站，接受许可协议，然后根据您的操作系统选择相关的下载选项。然后按照安装说明进行操作。

成功安装 JDK 后，还需要安装 Android Studio，即 Android IDE（集成开发环境）。

安装这两个包后，您将能够从 Ionic 项目编译和打包 Android 应用程序。

iOS 应用程序的设置

不幸的是，只能在 Mac OS 计算机上从您的 Ionic 项目构建 iOS 应用程序，这意味着您将无法从运行 Windows 或 Linux 的计算机编译或构建 iOS 应用程序。（尽管您现在可以在 Windows 计算机上编写应用程序，然后在 Mac 上为 iOS 构建它。）

为了在您的 Mac OS 上编译 iOS 应用程序，您需要安装Xcode。只需前往 Mac 上的 AppStore 并搜索Xcode。这是免费下载。

成功安装 Xcode 后，您还需要为 Xcode 安装额外的命令行工具。为此，请打开终端并运行以下命令。

xcode-select --install

这将安装 Cordova 用于构建 iOS 项目的其他工具。

为了能够从命令行构建您的 iOS 项目，您还需要运行以下命令。

sudo npm install -g ios-deploy

一切准备就绪后，您就可以从您的 Ionic 项目构建 iOS 应用程序了。

创建您的第一个 Ionic 项目

Ionic 使用命令行（尤其是在我们的设置过程中自动安装的 Ionic CLI）来创建、测试和构建您的 Ionic 应用程序。所以有勇气再次打开终端或命令提示符（取决于你的操作系统）。 

在我们继续之前，一个简短的建议：学习使用 Ionic CLI 工具。它现在正式成为你的新朋友，所以学会爱它吧！ 

我们需要做的第一件事是指定要保存 Ionic 项目的位置。出于本练习的目的，我们将简单地将其保存到我们的桌面上。因此，使用以下命令导航到桌面。

cd Desktop

对于我们想要创建的 Ionic 应用程序类型，我们有几个选项，这些选项被归类为Ionic 项目模板。对于初学者，存在三种类型的模板：Blank 模板、Tabs 模板和SideMenu 模板。我们将在此示例中使用选项卡模板，因此让我们继续创建我们的项目。

我们将调用我们的 Ionic 项目 DemoApp。因此，要使用标签模板创建我们的 DemoApp 项目并将其保存到我们的桌面上，我们需要在 CLI 中运行以下命令。

ionic start DemoApp tabs

此命令将需要一些时间来运行，因为它会下载所有项目模板包和应用程序依赖项。在安装过程中，系统可能会询问您是否要安装免费的 Ionic Pro SDK 并连接您的应用程序。回答 No 并再次按Enter继续安装。安装完成后，您应该会看到如下内容：

恭喜！您已经成功创建了您的第一个 Ionic 项目。

运行您的 Ionic 应用程序

项目设置完成后，我们现在可以查看 Ionic 应用程序了。为此，请通过 CLI 通过运行导航到新创建的项目文件夹， cd ./DemoApp然后在该文件夹中运行 ionic serve或ionic lab。

ionic serve 并且ionic lab 是 Ionic CLI 命令，它们将编译您的应用程序并启动本地开发服务器，允许您在计算机上的 Web 浏览器中查看您的 Ionic 应用程序。

在上图中，我运行了ionic lab 命令，如您所见，我可以查看编译为 Web 应用程序的 Ionic 项目。我们还没有设法将它编译为原生应用程序，但我们将在以后的教程中这样做。