Ionic安装详细步骤

本文概述

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

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

Node.js和NPM
代码编辑器
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

【Ionic安装详细步骤】空白应用
它是空白的启动程序项目或空的项目。以下命令创建空白应用程序。

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!'; } }

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