安装和配置Ionic iOS开发环境

本文记录的是如何配置Ionic的iOS开发环境,从安装Ionic, 构建简单的Ionic应用,安装配置 iOS 开发环境。到使用Capacitor构建 iOS App。

安装Ionic CLI

确保你已经安装了node, 执行以下命令安装Ionic CLI

1
npm install -g ionic

你也可以使用yarn来进行安装,执行:

1
yarn global add ionic

安装完成后,执行以下命令验证安装结果

1
ionic --version

如果安装正常,你应该可以看到系统显示版本号。

设置yarn为Ionic CLI的包管理工具(可选)

细节可以参考另一篇文章:如何设置Yarn作为Ionic CLI的包管理工具
可以简单的执行以下命令来完成:

1
2
ionic config set -g npmClient yarn
[OK] npmClient set to "yarn"!

安装 iOS 发布工具

该开发工具只是帮助开发者在 开发阶段 发布应用到模拟器和真实设备时使用的。顺序执行以下命令:

1
yarn global add ios-sim

1
yarn global add ios-deploy

建立示例应用

1
ionic start todo-ionic-app blank

安装完成以后,进入项目目录,运行程序,验证项目构建成功

1
2
cd todo-ionic-app
ionic serve

如果安装正常,系统将显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
> ng run app:serve --host=localhost --port=8100
[INFO] Waiting for connectivity with ng...

[INFO] Development server running!

Local: http://localhost:8100

Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[ng] ℹ 「wdm」: wait until bundle finished: /
[ng] Date: 2019-06-04T13:32:30.608Z
[ng] Hash: 335a1389e4700cdf8bd5
[ng] Time: 20357ms
[ng] chunk {common} common.js, common.js.map (common) 20.2 kB [rendered]
[ng] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 285 kB [initial] [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 4.92 kB [rendered]
[ng] chunk {main} main.js, main.js.map (main) 31.8 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.79 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 87.9 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.37 MB [initial] [rendered]
[INFO] ... and 173 additional chunks
[ng] ℹ 「wdm」: Compiled successfully.

并且会自动打开浏览器,显示应用的首页。

安装Capacitor

进入示例项目目录,然后执行命令安装capacitor执行

1
2
cd todo-ionic-app
yarn add @capacitor/core @capacitor/cli

如果你使用的是npm, 则可以执行

1
npm install --save @capacitor/core @capacitor/cli

构建示例项目

构建示例项目,生成发布目录

1
ionic build

成功构建后,你可以在项目里看到新建的www目录

添加对iOS的支持

1
ionic capacitor add ios

用xcode打开项目

在项目根目录,执行

1
ionic capacitor open ios

然后就可以用xcode对项目进行构建

本文标题:安装和配置Ionic iOS开发环境

文章作者:梅老师

发布时间:2019年07月20日 - 19:07

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/app/ionic/ionic-config-ios-environment/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。