安装ionic全流程

向右看齐 2022-08-21 10:00 196阅读 0赞

# 由于博客搬家，图片链接失效，可使用下面的链接，去最新的教程里面进行参考 #

# http://blog.csdn.net/xuexiiphone/article/details/51933503    #

#     #

# 1 下载node.js #

# 2 安装JDK #

# 3 安装Android SDK #

# 4 安装Apache ant #

# 5 创建hello world！ #

1. 下载node.js，

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

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

1.1 下载&安装node

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ -]

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

1.1.2 进入bin文件夹，具体路径如下~\\nodejs\\node\_modules\\npm\\bin

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 1]

1.2 使用npm下载cordova和ionic

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 2]

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][https_github.com_ForbesLindesay_spawn-sync_issues_29]

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

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 3]

2. 安装JDK

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

2.2 安装JDK，如下图

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 4]

2.3 配置JDK环境变量

2.3.1 配置JAVA\_HOME环境变量，如下图（JAVA\_HOME配置为jdk在你电脑上安装的路径）

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 5]

2.3.2 配置path环境变量，添加命令%JAVA\_HOME%\\bin，如下图

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 6]

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

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 7]

2.4 测试JDK

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 8]

3. 安装Android SDK

3.1 安装Android SDK，如下图

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 9]

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 10]

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 11]

3.4 下载完成后，如下图

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 12]

3.5 配置Android环境变量

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

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 13]

4. 安装Apache ant

4.1 下载并安装ant，下载地址：[http://ant.apache.org/manualdownload.cgi][http_ant.apache.org_manualdownload.cgi]

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 14]

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

5. 创建hello world！

5.1 用命令行创建工程

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 15]

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 16]

5.2 创建好的工程目录如下

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 17]

5.3 加载要打包的平台

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 18]

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 19]

5.4 创建Android应用

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

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 20]

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

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

### [Android SDK Manager更新报错——Download interrupted URL not found][Android SDK Manager_Download interrupted URL not found] ###

》

![安装ionic全流程 - 柠檬加冰 - 柠檬加冰的博客][ionic_ - _ - 21]

[https_nodejs.org]: https://nodejs.org/
[https_npm.taobao.org_dist]: https://npm.taobao.org/dist
[ionic_ - _ -]: http://img1.ph.126.net/Aj2LE9wvXMa8Zzr9VhqnwA==/6631289867053552300.png
[ionic_ - _ - 1]: http://img2.ph.126.net/weLpHvuJyPMeTAcDiHOBFQ==/202099033378988813.png
[ionic_ - _ - 2]: http://img2.ph.126.net/G3eu67-L7aFwIm8OC7Gfvw==/6631209602704722584.png
[https_github.com_ForbesLindesay_spawn-sync_issues_29]: https://github.com/ForbesLindesay/spawn-sync/issues/29
[ionic_ - _ - 3]: http://img0.ph.126.net/kWnzJ8Jcb6XsSMFf4kOYIA==/6631359136286092881.png
[http_www.oracle.com_technetwork_java_javase_downloads_index.html]: http://www.oracle.com/technetwork/java/javase/downloads/index.html
[ionic_ - _ - 4]: http://img2.ph.126.net/aYUP3Sa4jCFlgnsJjkbpUg==/6631251384146574059.png
[ionic_ - _ - 5]: http://img0.ph.126.net/nVyDcEjM0VRXGdsv0xLWTA==/6631260180239598753.png
[ionic_ - _ - 6]: http://img2.ph.126.net/spGVr8wSsCYwckKLweJI0w==/6631301961681452300.png
[ionic_ - _ - 7]: http://img1.ph.126.net/o-Ip0O_2iXLeSNcL8HV5NQ==/6631425106983759061.png
[java]: http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=21&is_app=0&jk=7128991ace3de102&k=java&k0=java&kdi0=0&luki=7&mcpm=0&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=2e13dce1a992871&ssp2=1&stid=9&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http://www.bubuko.com/infodetail-787439.html&urlid=0
[ionic_ - _ - 8]: http://img0.ph.126.net/ss55HbXpuY-of5ko2eAxhg==/1628895690324991119.png
[ionic_ - _ - 9]: http://img2.ph.126.net/yGMAsh1v35fzdWch_1gXpQ==/6631227194890743551.png
[ionic_ - _ - 10]: http://img2.ph.126.net/suvBFqTVbF5cb3x8uMZcXg==/6598227552461151239.png
[ionic_ - _ - 11]: http://img1.ph.126.net/dwq7US3QQLavogT2UsDucg==/6631310757774476254.png
[ionic_ - _ - 12]: http://img0.ph.126.net/M_8jZ6Br-FsmEMTvVGTuTw==/6598239647089052487.png
[ionic_ - _ - 13]: http://img1.ph.126.net/PdWFO9go1cR1N66o1jeXgQ==/6598090113507678685.png
[http_ant.apache.org_manualdownload.cgi]: http://ant.apache.org/manualdownload.cgi，如下图21
[ionic_ - _ - 14]: http://img0.ph.126.net/hra6w4SYb9UUyYJ4-G03TQ==/6598068123275304549.png
[ionic_ - _ - 15]: http://img0.ph.126.net/mS6y-jcDG9eTsmOP5oXnvA==/6598214358321618945.png
[ionic_ - _ - 16]: http://img0.ph.126.net/L9S65U6u81a2dlIZh46fLg==/4937352566582048847.png
[ionic_ - _ - 17]: http://img1.ph.126.net/mBICp4pKRXfQMoyi37zNZQ==/6598197865647198754.png
[ionic_ - _ - 18]: http://img2.ph.126.net/qllVaMu3P93XYuKIOit4rA==/4946078290860202709.jpg
[ionic_ - _ - 19]: http://img0.ph.126.net/zl5bc2YjOFZu-fO-TKahYw==/3746994890072829477.png
[ionic_ - _ - 20]: http://img2.ph.126.net/bQ3TkfYMtuEXEiNHSSY3gw==/4913990143514986103.png
[Android SDK Manager_Download interrupted URL not found]: http://ningmengjiabing.blog.163.com/blog/static/204847198201621643613701/
[ionic_ - _ - 21]: http://img1.ph.126.net/ZT1s537Hej5AOwDdEZ4T1A==/2871889187479464004.png