Ionic是什么就很少说了,引用一段百度百科的介绍,以下css
Ionic是一个用来开发混合手机应用的,开源的,免费的代码库。能够优化html、css和js的性能,构建高效的应用程序,并且还能够用于构建Sass和AngularJS的优化。ionic会是一个能够信赖的框架。html
网上已经有不少关于Ionic安装的教程,差很少都大同小异,此文章主要是记录本身Ionic学习的过程,和遇到的问题,有解决的,没解决的,反正都是本人操做过的android
全部步骤都是在Mac OS X系统下操做;ios
一、安装Node.js ,这步没问题,网上下载安装就行了npm
二、安装Cordova和Ionicbash
终端输入:sudo npm install -g cordova ionic 这个只要等待就行了自动完成的;app
默认安装完后路径是:/usr/local/bin框架
三、官网上说,如今就可使用了ionic
终端输入:sudo ionic start myApp tabs 下载了一堆东西(每次创建新项目都会下载,这个感受有点担忧,会不会哪天GFW了),建立成功,新建项目地址是在/usr/local/bin/myApp,默认是IOS Application;性能
四、一个最简单的项目就搞好了,而后按官网说明编译、模拟器运行;
sudo ionic platform add ios (由于默认已是IOS,因此能够省略;若是是要编译Android平台,ios改android就行了)
sudo ionic build ios 这步也很正常,显示**BUILD SUCCEEDED**
sudo emulate ios 这步操做就不行了,能够打开模拟器,可是App进不到模拟器里面去;报错:no such file or directory,stat '/users/apple/Library/logs/CoreSimulator/F9BF053E-FD55-42BC-A03C-2F2F3C804462/system.log ,提示很清楚,没找到文件,由于Mac OS的模拟器不是很了解,暂时还没解决,解决后再补充了;
五、在新建平台和编译以后,ionic会在/platforms/ios创建一个XCode的工程,用XCode打开就能够编辑修改了,并且用XCode挂接模拟器是能够正常运行的;
由于用ionic主要是为了跨平台,减小开发,天然想到还要编译下android平台的
一、sudo ionic platform add android 又是下载几个包,正常完成
二、sudo ionic build android ,报错了,Failed to find 'ANDROID_HOME' environment variable;显然是环境变量没设置,又折腾了下,把环境变量设置好;
环境变量存放在.bash_profile文件里,默认没有,手工新建一个,文件里输入:
export ANDROID_HOME=~/Document/ADT_SDK
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
终端里输入:sudo source ~/.bash_profile 让它当即生效
从新输入sudo ionic build android,能够了,又是下载一堆的东西
输入 sudo ionic emulate android 模拟器运行,可是报错,提示:No emulator images(avds) found; 模拟器镜像没找到;好像是须要Api 21 的Image,没肯定;
而后我先手动开启模拟器,再运行上面的指令就能够了,另外API 17版运行界面混乱,API 22版运行良好