虚拟机搭建之后怎么引入ionic页面

ionic 是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了与AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

ionic的开发添加android和ios环境。

ionic提供很多css组件 和javascript UI库。

ionic可以支持定制android和ios的插件，也支持服务端REST的敏捷开发

END

ionic安装

1

将cordova和ionic包安装到全局环境中（可供命令行使用）

2

安装完成之后，进入你要创建项目的路径，就可以使用ionic创建项目了

END

启动

1

然后可以使用：ionic serve

该命令会自动启动流浏览器，查看当前效果。

模板效果

空白模板（Black app）

$ ionic start myApp blank

tabs模板

$ ionic start myApp tabs

3

sidemenu模板

$ ionic start myApp sidemenu

1、安装VMware和Mac OS

2、ionic开发ios程序

3、安装Xcode

ionic开发Android程序都不需要安装eclipse等IDE，只要一个能写SSS，JS

，HTML的IDE就行（Hbuilder，WebStrom，Sublime Text）， 开发完成之后不就执行个ionic platform

add android,ionic build android，然后就能生成一个.apk文件，给手机上一安装O了。

ionic开发ios程序就得安装Xcode

IDE，这是因为蛋疼的ios程序无法直接使用命令生成，使用命令只能生成.project文件，然后再使用Xcode

IDE将.project文件转成.ipa文件，更让人蛋疼的是这个ipa文件居然也不能被直接安装到爱疯上，只能先上传到APP

Store，人家审核通过之后，我们再从APP

Store上下载。（看到这你可能快疯了，但是没法啊，谁让人家NB呢。好了废话少说了，乖乖安装Xcode吧）

4、安装ionic开发环境

5、安装Nodejs

6、安装cordova,ionic

sudo npm install -g cordova

sudo npm install -g ionic

或者合成一句统一安装

sudo npm install -g cordova ionic

7、创建项目

ionic start firstIonicProjectForIos [tabs][blank][sidememu]

8、浏览器中运行项目（调试项目）

cd firstIonicProjectForIosionic serve(自动在afai浏览器中打开)

9、模拟器中运行项目

因为apple开发的证书限制我们在没有申请购买apple账号的情况下，使用虚拟机来部署我们的应用，在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的，执行命令：

sudo npm install -g ios-sim

然后执行ionic platform add ios （添加ios平台）ionic build ios

开始编译项目，编译完成之后用Xcode打开开发目录下platform->ios->myIonic.xcodeproj的项目文件，Xcode中选择要运行的虚拟机版本并执行快捷键cmd+R运行虚拟机，虚拟机打开后会自动运行你应用。

当然你也可以使用命令：

ionic emulate ios(在ios模拟器中打开)/ionic run ios(我的报错了)

PS: 为什么不用run ios 命令直接启动虚拟机呢，因为我的环境下执行run会报错，虚拟机会打开但是无法运行程序，找了半天解决解决方案没有结果，索性直接用Xcode了，效果是一样的

10、打包项目

能使用Ionic来开发app的很可能对Ios和android的app打包发布流程不是很熟悉，我这里简单说明下：

ionic build android命令执行完成之后会在项目目录/platforms/android/build/outputs/apk目录下面生成.apk文件。

但是ionic build ios命令执行完成之后不会生成.ipa文件，只会在项目目录/platform/os目录下生成.xcodeproj文件，这个文件需要借助Xcode才能将其打包成.ipa文件。

因此接下来的任务就成了使用Xcode打包.xcodeproj成为.ipa的事情了。

---