ionic的安装与环境配置

Ionic的安装与环境配置

转载自：http://blog.csdn.net/baymaxlily/article/details/52948777

安装ionic之前的准备工作：JDK、ant、android SDK、NodeJS、cordova

一、安装JDK 1.7以上

1、下载地址：
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
2、Java环境变量的配置：
1) JAVA_HOME：C:\Program Files\Java\jdk1.8.0_05
2) Path：;%JAVA_HOME%\bin
3) CLASSPATH：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; （前面有个圆点和一个分号哦，圆点代表当前路径）；
3、在cmd命令窗口输入javac检查是否配置成功；

二、安装Apache ant

1、下载地址：http://ant.apache.org/manualdownload.cgi
2、解压缩：如我解压在了D:\ant\apache-ant-1.9.7；
3、配置环境变量：
1) ANT_HOME：D:\ant\apache-ant-1.9.7
2) Path：;%ANT_HOME%/bin
4、在cmd命令窗口输入ant -v，回车，显示出安装的ant版本，则安装成功；

三、安装android SDK

1、下载： http://developer.android.com/sdk/index.html；这里只需要android SDK，不用下载android studio；
2、配置环境变量：
1) ANDROID_HOME: D:\Android SDK\android\sdk
2) 分别将 Android SDK中tools目录的路径和platform-tools的路径添加到Path中；如我安装的目录：D:\Android SDK\android\sdk\platform-tools; D:\Android SDK\android\sdk\tools
3、打开Android SDK Manager，选择自己所需要的包进行安装（SDK Platform-tools和SDK tools必下；API下载19以上即Android4.4.2以上）；
这里如果下载不成功可以尝试：
启动 Android SDK Manager ，打开主界面，依次选择Tools、Options…，弹出Android SDK Manager - Settings窗口；在 Android SDK Manager - Settings 窗口中，在 HTTP Proxy Server 和 HTTP Proxy Port 输入框内填入mirrors.neusoft.edu.cn和80，
并且选中 Force https:sources to be fetched using http:复选框。设置完成后单击 Close按钮关闭。然后重新下载未能下载的包；
4、AVD虚拟机可配可不配，虚拟机执行速度太慢，可在真机上调试 ；
5、在cmd 命令行输入android -h检查是否安装成功与否；

四、安装node.js

1、下载：https://nodejs.org/en/ 下载64位的安装包进行安装。
2、执行命令 node –v

即安装成功

五、安装cordova、ionic

——————–cordova与ionic非安装方法 （不需要vpn）———————
1. 将已有的npm.rar解压到C:\Users\zhaoying（此目录为本机名）\AppData\Roaming\npm下

1. 进入其node_modules目录，解压其中的cordova与ionic至当前文件夹。

这样就安装完毕了.
3. 测试是否安装成功：
在cmd命令窗口输入cordova –v可看见版本号为5.1.1

输入ionic –v 可看见版本号为1.6.1

PS：这里因为某些需求我安装的版本较低，如果想要更新，可执行npm install -g ionic更新版本

——————–cordova与ionic常规安装方法 （不需要vpn）———————
1. 安装cordova：
在node.js中通过npm安装，cmd命令行输入：npminstall–gcordovaPs: npm install –g + “安装文件名”,这个是Node.js通用安装命令
这里，开始安装后会自动下载安装，有时候会出现报错，不用管，继续等待，如果几分钟页面一直没有反应则ctrl+c强制结束当前安装，重新输入命令再次安装，一般很快就会装好

2．安装ionic：
方法1：cmd命令行输入:$ npm install –g ionic ，ionic的安装可能会比较麻烦，因为链接到的外网，没有VPN可能会下载的比较慢，一般多试几次也是可以的，方法同上。
方法2：如果上述方法安装不成功，可以通过镜像服务器进行安装，地址https://npm.taobao.org/ ，按照步骤进行安装即可

安装完之后在cmd输入cordova -v；ionic –v能显示当前的版本号则安装成功。

———————————————————–END———————————————————–

1. 建议安装工具
   git、bower、grunt（在插件安装的时候会用到）
   安卓环境adt 运行ionic build android（打包） 和真机测试的时候需要用到。
   Android adt 离线包集成sdk
   http://bbs.phonegap100.com/thread-1456-1-1.html
   或者使用crosswalk（打包工具 方法自行百度）。

补充：
（一）Ionic常用操作

Android创建安装运行
ionic start myproject // ionic start myproject tabs（blank、sidemenu）
cd myproject
ionic platform add android
ionic build android
ionic emulate android (模拟器运行)
ionic run android (连接上手机运行)

Ios创建安装运行 （打包需要MAC）
ionic start myproject
cd myproject
ionic platform add ios
ionic build ios
ionic emulate ios

（二）ionic serve 调试方法

Cd进入刚才创建的myApp文件夹，输入提示的命令即可自动打开网页，在网页上同步查看代码编写效果，保存之后页面自动刷新。PS：建议使用chrome浏览器，可以查看元素进入开发者模式，很多插件大大加快了代码编写效率。

1. ionic serve –address + 你的无线网ip地址；ps：address前面有两个“-”
   在平时的代码编写中，经常需要用真机测试，但是每次通过打包安装的话效率太低，通过phoneGap也很慢而且麻烦。Ionic提供的这个方法只需要在手机上输入对应的ip地址即可在手机上看到效果，并且代码保存后手机会自动刷新。

方法：
A．查看当前的无线网ip地址，可以通过ipconfig/all查看，也可以在网络共享中心—–更改适配器设置——无限网络连接——-详细信息查看；
B. 输入ionic serve –address + 你的无线网ip地址；
C．此时会自动打开网页，然后在手机浏览器地址上输入和电脑网页一样的地址即可。

（三）提供几个常用网站

http://www.ionic.wang Ionic中文教程网，包含css与js文档以及ionic的图标。
http://www.ionicframework.com/ ionic英文官方文档，js部分教中文文档更加详细。
http://docs.angularjs.cn/api AngularJs英文api文档，详细介绍了Angularjs各模块语法的使用
http://www.haomou.net/2014/10/06/2014_ionic_learn/ 皓眸大前端，通过案例详细讲解了ionic的使用
https://npm.taobao.org/ 淘宝npm安装ionic镜像服务器
http://ngcordova.com/docs/plugins/ cordova插件，详细介绍插件的安装和使用