Ionic安装详细步骤

本文概述

• Ionic的先决条件
• 安装Node.js和NPM
• 代码编辑器
• Ionic CLI
• 建立应用程式
• 第一个Ionic应用
• 用VS Code打开项目

在本节中, 我们将学习如何为成功开发Ionic应用程序建立环境。

Ionic的先决条件

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

安装Node.js和NPM

Node.js和NPM是开发Ionic应用程序所需的基本平台。你可以通过以下链接安装Node.js和NPM软件包管理器。

在Windows上安装Node.js：单击此处

在Linux上安装Node.js：单击此处

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

代码编辑器

VS Code编辑器是创建Ionic Applications的最佳代码编辑器。它是由Microsoft开发的一种流行且免费的文本编辑器。

你可以下载并安装VS Code单击此处

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

• Ionic Studio：这是创建Ionic应用程序的最快, 最简单的方法。
• Atom：这是GitHub开发的可入侵的文本编辑器。
• WebStorm：它是由JetBrains开发的功能强大的非免费编辑器。

Ionic CLI

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

要在NPM中全局安装Ionic CLI, 请在终端窗口中输入以下命令。

$ npm install -g ionic

在系统上成功安装Ionic后, 将显示以下屏幕。

建立应用程式

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

C:\Users\srcmini> cd Desktop
C:\Users\srcmini\Desktop> ionic start

每当你运行上述命令时, 它将要求你输入项目名称。现在, 输入项目名称, 然后按Enter。你将获得以下屏幕。

在此屏幕中, 你将看到不同类型的模板。在这里, 你可以根据需要选择任何模板。我们可以了解以下不同类型的模板：

标签应用

如果选择选项卡模板, 则Ionic应用程序将包含选项卡菜单, 标题以及两个有用的屏幕和功能。这是默认的Ionic模板。以下命令创建选项卡应用程序。

C:\Users\Username\Desktop> ionic start myIonicApp tabs

侧面菜单应用

如果你选择侧面菜单模板, 则只会在应用程序的内容区域添加带有导航的侧面菜单。以下命令创建sidemenu应用。

C:\Users\Username\Desktop> ionic start myIonicApp sidemenu

空白应用

它是空白的启动程序项目或空的项目。以下命令创建空白应用程序。

C:\Users\Username\Desktop> ionic start myIonicApp blank

第一个Ionic应用

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

C:\Users\Username\Desktop> ionic start myIonicApp blank

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

C:\Users\Username\Desktop> cd myIonicApp
C:\Users\Username\Desktop> ionic serve

当你运行上面的命令时, 你的终端窗口如下图所示。

完成所有步骤后, 你将在浏览器中获得输出, 如下图所示。

现在, 打开chrome开发人员工具或按ctrl + shift + I。在此工具中, 单击切换设备工具栏上的时, 将显示以下屏幕。

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

用VS Code打开项目

打开Visual Studio代码编辑器, 转到菜单栏, 然后​​单击“文件”->“打开文件夹”, 然后选择你的项目。在Visual Studio Code中, 出现以下屏幕。

安装Angular Essential Extension

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

完成安装后, 转到Project Explorer, 该项目浏览器显示在Visual Studio代码编辑器的左侧。现在, 打开home.page.html文件并编写以下代码。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic First App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
    <p>{{ text }}</p>
    <ion-button (click)="onChangeText()">Change Text</ion-button>
</ion-content>

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  text = 'Our first Ionic app';

  onChangeText() {
    this.text = 'changed!';
  }
}

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

单击“更改文本”按钮时, 它看起来如下图所示。