Ionic系列——环境配置和项目搭建

摘要: 主要介绍了Ionic开发需要的环境配置和项目创建，还有一些安装时候的错误信息。

1、环境介绍

Java jdk: 开发环境

Android ADT: Ionic Android开发环境

IOS Xcode: Ionic Ios开发环境

ANT: Cordova编译工具

Node: 开发环境

Git: 源码拉取下载

Bower: 包管理工具

Grunt: node项目构建工具

2、环境配置

2.1、Java jdk环境

下载安装Java jdk环境， 并添加到环境变量 JAVA_HOME 中

配置JAVA的环境变量： http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html

2.2、操作平台环境

2.2.1、Android ADT（Android Development Tools）环境

下载安装ADT 并添加到环境变量 ANDROID_HOME 中

如何设置Android环境变量：http://jingyan.baidu.com/article/22a299b51c59d69e19376af8.html



①首先下载android sdk tools并安装

Android工具下载网址：http://www.androiddevtools.cn/

www.androiddevtools.cn若跳转失败请手动复制到浏览器中打开

②我在安装ionic的时候他说需要安装最新的sdk，就是android22所以需要越狱下载

Android 5.1 API 22 所有sdk文件下载地址 http://www.oschina.net/question/1539302_227672



③搭建android AVD模拟环境一直没搞通

如何新建安卓AVD虚拟模拟器 http://jingyan.baidu.com/article/a681b0ded7e7573b1943465b.html

2.2.2、IOS xcode环境

暂时只搞了android的，稍后完善！在windows上面安装ios和在ios上添加android环境都比较麻烦。

但如果你是苹果笔记本，你开发Ionic只需要安装一个Node环境就可以开发了。

2.3、ANT环境

下载安装ANT 并添加到环境变量 ANT_HOME 中

ANT的安装和环境变量配置: http://jingyan.baidu.com/article/90808022c5eed8fd91c80f90.html

ANT官网下载地址：http://ant.apache.org/

有的时候需要用管理员打开，可能涉及权限问题。（这句话忘了说什么了，先放着）

2.4、Node环境

下载安装Node

Node官网下载地址：https://nodejs.org/download/

2.5、Git环境

下载安装Git 并添加到环境变量中

git的安装和配置：http://jingyan.baidu.com/article/9f7e7ec0b17cac6f2815548d.html

Node官网下载地址：https://nodejs.org/download/

2.6、Bower和Grunt

之后我会在另一篇博客中完善bower的使用，下载配置，忽略文件等的使用。

npm install -g bower

npm install -g grunt

3、Ionic项目创建

3.1、安装ionic和cordova

添加的时候最好用cmd的管理员身份运行

npm install -g cordova ionic

3.2、创建项目

$ ionic start myproject  开始第一个项目，默认是tab
$ ionic start webApp blank
$ ionic start webApp tabs
$ ionic start webApp sidemenu

3.3、打包项目运行

android在项目中打开cmd命令窗口：

ionic platform add android（添加android平台，在项目中只需要运行一次）
ionic build android（生成androidapk）

ionic run android
ionic emulate android（在android模拟器或真机中模拟）这是在虚拟中运行

ionic serve可自动打开浏览器直接在浏览器测试

Ios在项目中打开cmd命令窗口：

$ ionic platform add ios
$ ionic build ios(这样生成的是app格式，还需要加ios证书变成ipa格式)
$ ionic emulate ios

3.4、ng-cordova的使用

Ionic系列——使用ng-cordova插件：http://my.oschina.net/u/1416844/blog/484693

4、项目介绍

介绍项目中文件夹的意义和作用，忽略哪些上传，刚拉取下来需要进行的操作，稍后完善！

5、错误处理

5.1 、在运行ionic build android的时候报错

[Error: ANDROID_HOME is not set and "android" command not in your PATH. You

这个时候要这样设置

ANDROID_HOME：C:\environment\adt-bundle-windows-x86-20130917\sdk

在path中写：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

5.2、node在添加-ng-cordova的时候存在跨磁盘移动的问题

Error: EXDEV, cross-device link not permitted 'C:\Users\shiguoqing\AppData\Local \Temp\git\1435225811973\plugin.xml'

我目前想到的解决办法是把项目弄到node的安装磁盘，然后在给弄回来，我现在项目挪到c盘去了。

5.3、创建AVD（安卓模拟器）报的错误

①首先是这个问题，这是没有安装英特尔硬件加速执行管理器，要手动安装一下。如果是自动安装的androidSDK他已经集成在里面了，但也需要手动安装一下。可以看下面的文章。

英特尔硬件加速执行管理器(英特尔 HAXM)是一款硬件辅助虚拟引擎(管理程序)安装： http://www.cnblogs.com/csulennon/p/4178404.html




②这个问题Stack Overflow上给了一些解释

屏幕尺寸影响，多个虚拟机影响，摄像头影响等

emulator window was out of view and was recentred 这个是屏幕的尺寸选的有问题

emulator: Failed to sync vcpu reg
emulator: Failed to sync HAX vcpu context
网上说这两个问题，arm可以打开，intel的打不开了，加速器关了又能打开了，先在主板上打开Virtual tech，硬件加速才能用，另外，只有intel支持VT的CPU才行，我的电脑是acer4741g，说是默认开启，但是bios中没法设置。但是这两个问题一直没有解决，所以模拟器也没有跑起来，各位大神有什么办法？

http://stackoverflow.com/questions/17024538/how-do-i-fix-failed-to-sync-vcpu-reg-error


③这个是问题是在环境变量配置的PATH中要添加上C:\Windows\System32



④我有一次从新装机，一直遇到这个问题，找不到build-tools



折腾了半天，发现解决的办法很简单就是



http://blog.csdn.net/langyuewu/article/details/46729985