安装ionic全流程

1 下载node.js

2 安装JDK

3 安装Android SDK

4 安装Apache ant

5 创建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下载cordova和ionic

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

可以使用下面两条语句进行提速,亲测速度很快

npm install -g cordova --registry=https://registry.npm.taobao.org

npm install -g ionic --registry=https://registry.npm.taobao.org
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.3 配置classpath环境变量,添加命令.;%JAVA_HOME%\lib\tools.jar,如下图所示

这里写图片描述
注:(.;)表示的是JVM先搜索当前目录

###2.4 测试JDK

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

这里写图片描述

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

这里写图片描述

一定要下载那个二进制类型的文件,要不然里面没有bin和lib文件夹

这里写图片描述

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

配置完成后,在cmd中输入ant -version 测试配置完成情况

这里写图片描述

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》
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值