安装ionic全流程

喜欢ヅ旅行 2022-09-23 09:29 220阅读 0赞

## 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 ###

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

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

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

![这里写图片描述][20160717175055793]

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

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

![这里写图片描述][20160717175317207]

### 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 ####

#### 2.3 配置JDK环境变量 ####

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

![这里写图片描述][20160717175418689]

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

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

\#\#\#2.4 测试JDK

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

![这里写图片描述][20160717175533566]

### 3. 安装Android SDK ###

#### 3.1 安装Android SDK，如下图 ####

![这里写图片描述][20160717175614676]

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

![这里写图片描述][20160717175645099]

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

![这里写图片描述][20160717175755568]

#### 3.4 下载完成后，如下图 ####

![这里写图片描述][20160717175823302]

\#\#\#\#3.5 配置Android环境变量

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

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

![这里写图片描述][20160717175901474]

### 4. 安装Apache ant ###

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

![这里写图片描述][20160717175945522]

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

![这里写图片描述][20160719125026376]

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

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

![这里写图片描述][20160719125104471]

### 5. 创建hello world！ ###

#### 5.1 用命令行创建工程 ####

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

![这里写图片描述][20160717180029444]

#### 5.2 创建好的工程目录如下 ####

![这里写图片描述][20160717180116163]

#### 5.3 加载要打包的平台 ####

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

![这里写图片描述][20160717180200591]

#### 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》][Android SDK Manager_Download interrupted URL not found]  
![这里写图片描述][20160717180318968]

[https_nodejs.org]: https://nodejs.org
[https_npm.taobao.org_dist]: https://npm.taobao.org/dist
[20160717175055793]: /images/20220720/8b50c3c2511c4c62b3e5ecad5c951012.png
[https_github.com_ForbesLindesay_spawn-sync_issues_29]: https://github.com/ForbesLindesay/spawn-sync/issues/29
[20160717175317207]: /images/20220720/3099dc6c23cc47aa812374285ec8fcf6.png
[http_www.oracle.com_technetwork_java_javase_downloads_index.html]: http://www.oracle.com/technetwork/java/javase/downloads/index.html
[20160717175418689]: /images/20220720/b175134dda904823afc91768b7cff4ad.png
[20160719123011198]: /images/20220720/44a20c0fdd3c47b7933e0e23d0ea6caa.png
[20160717175533566]: /images/20220720/339ad4b46d164c62b1e4852d829cedb7.png
[20160717175614676]: /images/20220720/fd3a3975d1ec4816b6d38d1db12117e0.png
[20160717175645099]: /images/20220720/5868207057d84cfa88699fed9727ded6.png
[20160717175755568]: /images/20220720/81c0b961bdf0471f8000a6a2e1f28558.png
[20160717175823302]: /images/20220720/e9aa2bf6a2774019b205b1b1dc2a8f50.png
[20160717175901474]: /images/20220720/f16ac9f3476f41e8b5c0dc802de0ea4e.png
[http_ant.apache.org_manualdownload.cgi]: http://ant.apache.org/manualdownload.cgi
[20160717175945522]: /images/20220720/2c564fa27a8a4b6280a6b0b7973592e7.png
[20160719125026376]: /images/20220720/53d49e32187c4efe90f4e462cfc545c9.png
[20160719125104471]: /images/20220720/0abccf3c3cb14521b39e97d94062e397.png
[20160717180029444]: /images/20220720/7e93aa5071c64da18775e7797b3eac93.png
[20160717180116163]: /images/20220720/0de4d701bab745e7876e9c9781f0c096.png
[20160717180200591]: /images/20220720/9d1bdefd39954ebaa62b2fa0db853bf9.png
[Android SDK Manager_Download interrupted URL not found]: http://blog.csdn.net/xuexiiphone/article/details/51252782
[20160717180318968]: /images/20220720/3b3271332c1f4a97b3296e2166429ffd.png