Ionic 开发环境搭建(Windows)
2017-05-11 16:17
176 查看
出处 :http://www.jianshu.com/p/b9757a5bcb07
Ionic 官网:http://www.ionicframework.com/
Ionic 是一个强大的 HTML5 SDK,它使用 HTML、CSS、Javascript 等 web 技术帮助你快速构建原生风格的移动应用
Ionic 目前能支持 iOS 和 Android
Ionic 是基于 Cordova 的,在 Cordova 上能用的一切同样可以在 Ionic 上使用
Ionic 在 Cordova 基础上增加了 Ionic UI、AngularJS、一个强大的 CLI 工具和一些云端服务等
Ionic 的开发环境离不开下列组件:
Node.js
Cordova & Ionic CLI
Java SDK
Android SDK
前往 Node.js 官网下载 Node.js 安装包直接安装,建议下载 LTS 版本,笔者安装的是 v4.4.5 LTS
安装的过程中默认勾选的“Add to PATH”选项不要取消
![](http://upload-images.jianshu.io/upload_images/2255748-65e4608d89691dcc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装完成后打开终端,输入“node -v”命令,能正常现实版本号说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-b826ed0df4dc6654.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
npm 是 Node.js 的包管理器,由于我大天朝网络环境的原因,在使用 npm 的时候经常无法安装包或者下载很慢
于是我们需要一个 npm 的中国镜像,cnpm 是淘宝的 npm 镜像,10分钟同步一次
以管理员身份打开终端,输入“npm i cnpm -g”命令,等待安装完成
![](http://upload-images.jianshu.io/upload_images/2255748-7baf3345cbdfcac1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装完成后,输入“cnpm -v”命令,能正常显示版本号说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-a0cb4ea852f30ac1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
以管理员身份打开终端,输入“npm i cordova ionic -g”命令,等待安装完成
如果安装了 cnpm,可以使用“cnpm i cordova ionic -g”命令
![](http://upload-images.jianshu.io/upload_images/2255748-027ef0522a79060e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装完成后,输入“cordova -v”命令和“ionic -v”命令,能正常现实版本号说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-13b46061c4fa7a9b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
前往 Oracle 官网下载最新的 jdk 安装,我下载的是 jdk 8u91 windows x86 的版本
由于很多依赖 Java 的项目都不支持64位的 jdk,所以建议大家下载安装 x86 版本
安装过程中可以只安装 jdk,不安装 jre 和源代码
![](http://upload-images.jianshu.io/upload_images/2255748-5b00dba797d80c66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
为 jdk 设置系统环境变量
打开系统属性,在“高级”选项卡中找到环境变量,单击打开“环境变量”设置窗口
![](http://upload-images.jianshu.io/upload_images/2255748-9d2dfdcd872fc486.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在“系统变量”列表中新建一个系统变量“JAVA_HOME”,值为刚才安装的 jdk 的路径
![](http://upload-images.jianshu.io/upload_images/2255748-380a5a24296a4c3f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在“系统变量”列表中找到“Path”变量,双击打开“编辑系统变量”窗口
将 jdk 的 bin 路径添加至“变量值”末尾并保存
![](http://upload-images.jianshu.io/upload_images/2255748-6d15c5a8ddd7cc3c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装完成后打开终端,输入“java -version”命令,能正常现实版本号说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-35a4b5cbce8fa767.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
前往 Android 官网 下载最新的 Android SDK 安装,目前最新的版本是 r24.4.1,我下载的是 zip 版本
下载完后解压到“C:\Program Files(x86)\Android\”目录下
![](http://upload-images.jianshu.io/upload_images/2255748-9b06ea05e543302d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
为 Android SDK 设置系统环境变量
在“系统变量”列表中新建一个系统变量“ADT_HOME”,值为刚才安装的 Android SDK 的路径
![](http://upload-images.jianshu.io/upload_images/2255748-700a5690582d11b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在“系统变量”列表中找到“Path”变量,双击打开“编辑系统变量”窗口
将 Android SDK 的 tools 和 platform-tools 路径添加至“变量值”末尾并保存
![](http://upload-images.jianshu.io/upload_images/2255748-85985ea14cda2260.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/2255748-18b8b79213951248.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
设置完成后打开终端,输入“android”命令,能打开 Android SDK Manager 窗口说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-1c5fb0a3f360ebc9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
使用 Android SDK Manager 安装所需组件
Android SDK 各版本的 SDK Platform 和 Tools 并没有内置在 Android SDK 中,所有我们要通过 Android SDK Manager 来安装
打开 Android SDK Manager 后,选择要安装的组件
由于我一般是用真实 Android 设备来开发,所以我只选择了 Android SDK Tools、Android SDK Platform-tools、Android SDK Build-tools、Android Support Repository、Google USB Driver,以及Android API 19-24 的 SDK Platform
如果要使用 Android 内置的虚拟机来运行 App 的话,还需要下载对应版本的 System Image,这里我们不再赘述
点击 Install 按钮,等待安装完成
![](http://upload-images.jianshu.io/upload_images/2255748-039095c6117e5f56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
到此,Ionic 开发环境已安装完毕!
安装完开发环境后,我们通过一个 Demo 来测试一下环境
打开终端,创建一个项目
![](http://upload-images.jianshu.io/upload_images/2255748-93434e87a5e1eada.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
等待创建完成,添加 android platform
![](http://upload-images.jianshu.io/upload_images/2255748-b3bc4e0e84125038.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
添加完成后,将 Android 手机通过 USB 线连接至电脑,然后在手机上运行项目
![](http://upload-images.jianshu.io/upload_images/2255748-505ee2d13ba40539.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
运行成功!
![](http://upload-images.jianshu.io/upload_images/2255748-1ffc4bbb0b54d210.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
手机上的运行截图
![](http://upload-images.jianshu.io/upload_images/2255748-c3289c95eed86799.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
测试结果表明环境安装成功!
找不到 Android 设备
笔者用的是一台三星S4的测试机,在测试中遇到过找不到 Android 设备的问题,然后打开电脑上的豌豆荚,重新连接手机至电脑并授权电脑进行 USB 调试,最终问题得到解决
Ionic 概述
Ionic 官网:http://www.ionicframework.com/Ionic 是一个强大的 HTML5 SDK,它使用 HTML、CSS、Javascript 等 web 技术帮助你快速构建原生风格的移动应用
Ionic 目前能支持 iOS 和 Android
与 Cordova 的关系
Ionic 是基于 Cordova 的,在 Cordova 上能用的一切同样可以在 Ionic 上使用Ionic 在 Cordova 基础上增加了 Ionic UI、AngularJS、一个强大的 CLI 工具和一些云端服务等
安装 Ionic
Ionic 的开发环境离不开下列组件:Node.js
Cordova & Ionic CLI
Java SDK
Android SDK
安装 Node.js
前往 Node.js 官网下载 Node.js 安装包直接安装,建议下载 LTS 版本,笔者安装的是 v4.4.5 LTS安装的过程中默认勾选的“Add to PATH”选项不要取消
![](http://upload-images.jianshu.io/upload_images/2255748-65e4608d89691dcc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装完成后打开终端,输入“node -v”命令,能正常现实版本号说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-b826ed0df4dc6654.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装 cnpm (可选)
npm 是 Node.js 的包管理器,由于我大天朝网络环境的原因,在使用 npm 的时候经常无法安装包或者下载很慢于是我们需要一个 npm 的中国镜像,cnpm 是淘宝的 npm 镜像,10分钟同步一次
以管理员身份打开终端,输入“npm i cnpm -g”命令,等待安装完成
![](http://upload-images.jianshu.io/upload_images/2255748-7baf3345cbdfcac1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装完成后,输入“cnpm -v”命令,能正常显示版本号说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-a0cb4ea852f30ac1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装 Cordova & Ionic CLI
以管理员身份打开终端,输入“npm i cordova ionic -g”命令,等待安装完成如果安装了 cnpm,可以使用“cnpm i cordova ionic -g”命令
![](http://upload-images.jianshu.io/upload_images/2255748-027ef0522a79060e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装完成后,输入“cordova -v”命令和“ionic -v”命令,能正常现实版本号说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-13b46061c4fa7a9b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装 Java SDK (jdk)
前往 Oracle 官网下载最新的 jdk 安装,我下载的是 jdk 8u91 windows x86 的版本由于很多依赖 Java 的项目都不支持64位的 jdk,所以建议大家下载安装 x86 版本
安装过程中可以只安装 jdk,不安装 jre 和源代码
![](http://upload-images.jianshu.io/upload_images/2255748-5b00dba797d80c66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
为 jdk 设置系统环境变量
打开系统属性,在“高级”选项卡中找到环境变量,单击打开“环境变量”设置窗口
![](http://upload-images.jianshu.io/upload_images/2255748-9d2dfdcd872fc486.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在“系统变量”列表中新建一个系统变量“JAVA_HOME”,值为刚才安装的 jdk 的路径
![](http://upload-images.jianshu.io/upload_images/2255748-380a5a24296a4c3f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在“系统变量”列表中找到“Path”变量,双击打开“编辑系统变量”窗口
将 jdk 的 bin 路径添加至“变量值”末尾并保存
![](http://upload-images.jianshu.io/upload_images/2255748-6d15c5a8ddd7cc3c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装完成后打开终端,输入“java -version”命令,能正常现实版本号说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-35a4b5cbce8fa767.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
安装 Android SDK
前往 Android 官网 下载最新的 Android SDK 安装,目前最新的版本是 r24.4.1,我下载的是 zip 版本下载完后解压到“C:\Program Files(x86)\Android\”目录下
![](http://upload-images.jianshu.io/upload_images/2255748-9b06ea05e543302d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
为 Android SDK 设置系统环境变量
在“系统变量”列表中新建一个系统变量“ADT_HOME”,值为刚才安装的 Android SDK 的路径
![](http://upload-images.jianshu.io/upload_images/2255748-700a5690582d11b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在“系统变量”列表中找到“Path”变量,双击打开“编辑系统变量”窗口
将 Android SDK 的 tools 和 platform-tools 路径添加至“变量值”末尾并保存
![](http://upload-images.jianshu.io/upload_images/2255748-85985ea14cda2260.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/2255748-18b8b79213951248.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
设置完成后打开终端,输入“android”命令,能打开 Android SDK Manager 窗口说明安装成功
![](http://upload-images.jianshu.io/upload_images/2255748-1c5fb0a3f360ebc9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
使用 Android SDK Manager 安装所需组件
Android SDK 各版本的 SDK Platform 和 Tools 并没有内置在 Android SDK 中,所有我们要通过 Android SDK Manager 来安装
打开 Android SDK Manager 后,选择要安装的组件
由于我一般是用真实 Android 设备来开发,所以我只选择了 Android SDK Tools、Android SDK Platform-tools、Android SDK Build-tools、Android Support Repository、Google USB Driver,以及Android API 19-24 的 SDK Platform
如果要使用 Android 内置的虚拟机来运行 App 的话,还需要下载对应版本的 System Image,这里我们不再赘述
点击 Install 按钮,等待安装完成
![](http://upload-images.jianshu.io/upload_images/2255748-039095c6117e5f56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
到此,Ionic 开发环境已安装完毕!
测试环境
安装完开发环境后,我们通过一个 Demo 来测试一下环境打开终端,创建一个项目
![](http://upload-images.jianshu.io/upload_images/2255748-93434e87a5e1eada.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
等待创建完成,添加 android platform
![](http://upload-images.jianshu.io/upload_images/2255748-b3bc4e0e84125038.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
添加完成后,将 Android 手机通过 USB 线连接至电脑,然后在手机上运行项目
![](http://upload-images.jianshu.io/upload_images/2255748-505ee2d13ba40539.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
运行成功!
![](http://upload-images.jianshu.io/upload_images/2255748-1ffc4bbb0b54d210.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
手机上的运行截图
![](http://upload-images.jianshu.io/upload_images/2255748-c3289c95eed86799.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
测试结果表明环境安装成功!
可能存在的问题
找不到 Android 设备笔者用的是一台三星S4的测试机,在测试中遇到过找不到 Android 设备的问题,然后打开电脑上的豌豆荚,重新连接手机至电脑并授权电脑进行 USB 调试,最终问题得到解决
相关文章推荐
- Ionic 开发环境搭建(Windows)-yellowcong
- Windows下Ionic Android开发环境搭建
- Windows下Ionic Android开发环境搭建
- Ionic简单接触:Windows下Ionic Android开发环境搭建
- 在windows下搭建ionic开发环境
- Windows下Ionic Android开发环境搭建
- Windows下Ionic Android开发环境搭建
- Windows操作系统下ionic开发环境搭建
- Ionic简单接触:Windows下Ionic Android开发环境搭建
- windows下搭建Linux开发环境
- [zz]windows下Dev-Cpp与QT4.4.3开发环境的搭建
- windows下搭建SlickEdit+MinGW开发环境
- Windows平台上iPhone基于cygwin开发环境的搭建方法
- 搭建Windows下基于Eclipse的PHP开发环境
- Windows Embedded CE 6.0开发环境的搭建
- 如何在Windows下搭建Android开发环境
- Windows平台上iPhone SDK基于cygwin开发环境的搭建方法
- 搭建Windows平台下针对MinGW编译器的Qt4开发环境
- 如何在Windows下搭建Android开发环境
- 使用eclipse(v3.01)与mingw(v3.1.0)搭建Windows下C/C++开发环境