Ionic从零开始：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开发环境。 无论使用哪种操作系统，都必须手动安装每个必需的依赖项。 因此，让我们继续前进，开始设置我们的离子开发环境。

安装Node.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上打开Terminal的情况下，键入以下命令并通过按键盘上的Enter来运行它。

sudo npm install -g cordova ionic

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

在Windows上安装

在Windows的“命令提示符”中，键入以下命令，然后按键盘上的Enter来运行它。

npm install -g cordova ionic

您可能已经注意到，我们正在使用Node Package Manager（npm）在上方安装Ionic和Cordova，因此首先安装Node.js至关重要。 您可能还注意到，在Mac和Linux上，我们在sudo前面使用sudo 。 这对于在这些系统上全局安装Ionic和Cordova是必要的。

安装过程可能需要几分钟，具体取决于您的Internet连接，但是一旦完成，您应该会看到类似以下内容：

太酷了，因此成功安装了Ionic和Cordova之后，让我们继续下一节并安装其他软件，这些软件是从Ionic项目成功构建iOS和Android应用程序所需要的。

特定于平台的设置

您不必立即安装这些软件工具。 您可以使用我们之前讨论的网络技术继续构建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 CLI）来创建，测试和构建Ionic应用程序。 因此，再次有勇气打开终端或命令提示符（取决于您的操作系统）。

在继续之前，请先提出一些建议：学会使用Ionic CLI工具。 现在，它已正式成为您的新朋友，因此请学习爱它！

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

cd Desktop

对于要创建的Ionic应用程序的类型，我们有一些选项，它们被分类为Ionic项目模板 。 对于初学者，存在三种类型的模板： 空白模板， 选项卡模板和SideMenu模板。 在此示例中，我们将使用tabs模板，因此让我们继续创建我们的项目。

我们将称其为离子项目DemoApp。 因此，要使用选项卡模板创建DemoApp项目并将其保存到桌面，我们需要在CLI中运行以下命令。

ionic start DemoApp tabs

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

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

运行您的Ionic应用

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

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

在上图中，我已经运行了ionic lab命令，并且如您所见，我能够查看作为Web应用程序编译的Ionic项目。 到目前为止，我们仍未设法将其编译为本地应用程序，但我们将在以后的教程中进行编译。

结论

我记得当我开始开发Ionic应用程序时，一开始非常令人困惑，尤其是必须通过CLI进行很多初始工作。 作为一个根本不习惯使用CLI的人，这对我来说是一个可怕的旅程-因此我可以想象你们中的某些人会有什么感觉。 我对您的建议是拥抱它-在使用过程中，您会变得更加舒适和习惯，不要担心，您不会在自己钟爱的计算机上破坏任何东西！

我们在这篇文章中介绍了很多内容，但是有了这些知识，您就可以克服编写Ionic应用程序的最大障碍之一。 请继续关注本系列的下一篇文章！

翻译自: https://code.tutsplus.com/tutorials/ionic-from-scratch-getting-started-with-ionic--cms-29862