Phonegap、Cordova、Ionic 开发环境搭建(Windows OS)

一、Java运行环境

--------------------------------------------------------------------------------------------------------------------------------------------

JDK7 官网下载路径： 
http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
JKD8 官网下载路径：
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
可根据自己的电脑配置下载对应jdk

Jdk安装、环境变量配置

安装后需要配置对应的环境变量

添加 //jdk 安装的根路径

JAVA_HOME  

D:\Java\Jdk\jdk1.7.0_40

PATH

%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

CLASSPATH

.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

// 通过cmd 命令 java -version 验证是否安装配置成功

二、apache-ant 编译器

--------------------------------------------------------------------------------------------------------------------------------------------

apache-ant 下载并安装、配置环境变量

官网下载路径： http://ant.apache.org/bindownload.cgi 
如windows 下载 apache-ant-1.9.6.zip 解压到安装目录即可

添加环境变量：

ANT_HOME

F:\Ionic\apache-ant-1.9.6

CLASSPATH

%ANT_HOME%\bin;

Path

%ANT_HOME%\bin;

// 通过cmd 命令 ant -v 验证是否配置成功

三、Android SDK （Android编译）

--------------------------------------------------------------------------------------------------------------------------------------------

Android官网下载地址：http://developer.android.com/sdk/index.html  // 可能你不能访问该网站 (┬＿┬)

Android developer 最新国内镜像：http://wear.techbrood.com，包含Android最新文档以及Android Wear，Android TV，Android Auto各个子领域方面的内容。

下载下来后需要配置两个环境变量

添加环境变量

ANDROID_HOME

D:\Android\androidsdk

path添加: 

%ANDROID_HOME%\tools;

%ANDROID_HOME%\platform-tools;

四、nodejs  Javascript运行环境、包管理和分发工具

--------------------------------------------------------------------------------------------------------------------------------------------

官网下载路径：
https://nodejs.org/en/download/
可自行根据需要下载

如本机是 win7 x64 下载的是 node-v5.2.0-x64.msi

点击安装到指定目录（有些电脑安装后不能自动配置好环境变量，需要自己配置）

如本人把 nodejs 安装到：F:\Ionic\nodejs 目录下

path环境变量添加：F:\Ionic\nodejs; 

// 通过 cmd命令运行： node -v 验证是否安装成功

新的 nodejs 安装包已经集成了 npm (NodeJS包管理和分发工具) nodejs 安装后可以使用 npm 命令

// 通过 cmd命令运行： npm -v 验证

设置node 安装插件全局目录（如果不设置，npm安装的工具会安装在默认路径下）

npm config set prefix "F:\Ionic\nodejs\node_global"
//设置全局目录

npm config set cache "F:\Ionic\nodejs\node_cache"
//设置缓存目录

五、Phonegap、Cordova、Ionic安装

--------------------------------------------------------------------------------------------------------------------------------------------

1、 phonegap ：

npm install -g phonegap

如果安装失败，用下面这种方式试试（大多都是网络问题—安装成功请忽略）

//临时使用代理

npm install -g phonegap --registry=http://registry.npmjs.org/

当然也可以把 注册设置到npm配置中:

npm config set registry "http://registry.npmjs.org/"

如果还是安装失败，使用淘宝镜像下载安装（安装成功请忽略）

npm install -g cnpm --registry=http://registry.npm.taobao.org   //设置淘宝镜像

cnpm install -g phonegap     //该方式安装的成功率会高，同样试用于 npm 的其他工具的安装

等待安装成功，输入 phonegap -v 查看是否安装成功，如果提示不是内部或外部命令

配置一下环境变量path添加

PHONEGAP_HOME

F:\Ionic\nodejs\node_global\node_modules\phonegap

Path

%PHONEGAP_HOME%\bin;

2、Cordova ：

npm install -g cordova 

如果安装失败，试试下面这种方式：(临时使用代理)

npm install -g cordova --registry=http://registry.npmjs.org/

如果还是安装失败，使用淘宝镜像下载安装（安装成功请忽略）

cnpm install -g cordova

等待安装成功，输入 cordova -v 查看是否安装成功，如果提示不是内部或外部命令

配置一下环境变量path添加

 

CORDOVA_HOME

F:\Ionic\nodejs\node_global\node_modules\cordova

Path

%CORDOVA_HOME%\bin;

3、ionic ：

npm install -g ionic 

如果安装失败，试试下面这种方式

npm install -g ionic --registry=http://registry.npmjs.org/

或者使用淘宝镜像下载：

npm install -g cnpm --registry=http://registry.npm.taobao.org   //设置淘宝镜像

cnpm install -g ionic     //安装ionic ，该方式安装的成功率会高，同样试用与 npm 的其他工具的安装

等待安装成功，输入 ionic -v 查看是否安装成功，如果提示不是内部或外部命令

配置一下环境变量path添加

IONIC_HOME

F:\Ionic\nodejs\node_global\node_modules\ionic

-- 添加Path

%IONIC_HOME%\bin;

------------------------------------扩展----------------------------------

Chrome扩展， Ripple Emulator。可以直接在Chrome上调试Colrdova的功能

能选择模拟器来测试屏幕大小，还能选择模拟器的Cordova版本

下载地址：
http://ripple.incubator.apache.org
或运行 npm安装

npm install -g ripple-emulator

RIPPLE_HOME

F:\Ionic\nodejs\node_global\node_modules\ripple-emulator

path:

%RIPPLE_HOME%\bin;

----------------------------

建议使用开发工具 WebStorm10