码迷,mamicode.com
首页 > 其他好文 > 详细

安装ionic全流程

时间:2016-04-26 20:14:56      阅读:366      评论:0      收藏:0      [点我收藏+]

标签:

下载node.js

安装JDK

安装Android SDK

安装Apache ant

创建hello world


1. 下载node.js

官网 https://nodejs.org 速度太慢

国内镜像: https://npm.taobao.org/dist 下对应版本即可

1.1 下载&安装node

技术分享

 

1.1.1 安装完成后,打开cmd命令行界面,

1.1.2 进入bin文件夹,具体路径如下~\nodejs\node_modules\npm\bin

1.1.3 执行node -v,如安装成功,则显示版本号,如下图

技术分享

1.2 使用npm下载cordovaionic

1.2.1 执行npm install -g cordova命令,安装Cordova,如下图。该过程巨慢,可以泡杯茶慢慢等~

技术分享

1.2.2 如果中途过程中断网或是下载失败,可以使用npm cache clean命令,清除缓存之后再次下载。

===================================================

注:常见错误

若遇到错误如下:

npm ERR! spawn-sync@1.0.13 postinstall: `node postinstall`

npm ERR! spawn ENOENT

npm ERR! 

npm ERR! Failed at the spawn-sync@1.0.13 postinstall script ‘node postinstall‘.

npm ERR! This is most likely a problem with the spawn-sync package,

npm ERR! not with npm itself.

===================================================

解决方法: npm install --ignore-scripts -g cordova ionic

参考:https://github.com/ForbesLindesay/spawn-sync/issues/29

===================================================

1.2.3 使用npm install -g ionic命令,安装ionic,如下图

技术分享

2. 安装JDK

2.1 下载适合平台的JDK版本,下载地址http://www.oracle.com/technetwork/java/javase/downloads/index.html

2.2 安装JDK,如下图

技术分享

2.3 配置JDK环境变量

2.3.1 配置JAVA_HOME环境变量,如下图JAVA_HOME配置为jdk在你电脑上安装的路径)

技术分享

 2.3.2 配置path环境变量,添加命令%JAVA_HOME%\bin,如下图

技术分享

 2.3.3 配置classpath环境变量,添加命令.;%JAVA_HOME%\lib\tools.jar,如下图所示

注:(.;)表示的是JVM先搜索当前目录

技术分享

 2.4 测试JDK

配置完毕后,要使用上述SET PATH=C:\方法,使path配置生效,然后通过cmd运行以下命令:java -versionjavac 如果出现返回信息,则设置成功。如图

技术分享

 3. 安装Android SDK

3.1 安装Android SDK,如下图

技术分享

3.2 安装完成后的Android文件夹如下图所示

技术分享

 3.3 点击tools目录下的Android..bat,Tools目录下,勾选Android SDK Platform-tools选项,如下图,点击Install 1 package

技术分享

3.4 下载完成后,如下图

技术分享

 3.5 配置Android环境变量

path中,增加两个环境变量,分别是tools的路径和platform-tools的路径。(和JDK基本类似,不明白可以自行百度)

3.6 在命令行中,输入android,出现Android SDK Manager则证明配置完成,如下图所示

技术分享

4. 安装Apache ant

4.1 下载并安装ant,下载地址:http://ant.apache.org/manualdownload.cgi

技术分享

 4.2 完成下载后,将环境变量配置好。

5. 创建hello world

5.1 用命令行创建工程

在命令行中,输入ionic start myapp tabs

 技术分享

技术分享

5.2 创建好的工程目录如下

技术分享

 5.3 加载要打包的平台

在命令行中,输入ionic platform add android,要下载部分组件,完成后效果如图

技术分享

 

技术分享

 

5.4 创建Android应用

在命令行中,输入ionic build android,需要android本身的build-tools版本支持Android-19以上版本才能编译生成

技术分享

 

5.5 使用模拟器查看之前创建的Android应用

在命令行中,输入ionic emulate android,首先需要下载最新版本的SDK图片以及API,然后创建一个最简单的模拟器,模拟器创建可自行百度,很简单。如果sdk manager更新不了,请参照我的另外一篇文章《

Android SDK Manager更新报错——Download interrupted URL not found

技术分享

 

 

  

 

 


 

 

 

 

安装ionic全流程

标签:

原文地址:http://blog.csdn.net/xuexiiphone/article/details/51252780

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!