安装和配置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

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

> 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对项目进行构建