美文网首页javascript
ionic 1. 安装(window)

ionic 1. 安装(window)

作者: 在宇宙Debugger | 来源:发表于2017-01-11 13:08 被阅读197次

前言

高能预警,ionic如果你没有安装过,他将超级难以安装!
意志不坚定者迅速撤离

1.安装 nodeJS

64位地址: https://nodejs.org/dist/v6.9.4/node-v6.9.4-x64.msi
32位地址: https://nodejs.org/dist/v6.9.4/node-v6.9.4-x86.msi
最新版下载的地址: https://nodejs.org/en/

下载完成后运行,与普通软件无异,可以一直点下一步完成安装

2. 检查
安装完成后 ctrl + r,输入cmd回车,打开命令行工具,输入:
node -v
npm -v

如图所示即为安装成功(没有报错,正常打印版本号)


cmd.png
3. ionic的安装可能需要连接外网,这里给出2个解决办法
3.1 使用国内镜像安装(CNPM)

cnpm可能导致下载的资源不完整,但是几率很小,之前遇到过
在 命令行工具 中执行

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

如果没有报错,打印版本号,即安装成功:

打印版本号

安装完成后,执行

cnpm install -g cordova ionic
3.2 使用蓝灯访问外网

下载地址 : https://getlantern.org/index.html

安装非常方便,只要双击安装包,就自动安装了,同时桌面上会出现快捷方式,双击快捷方式,会弹出一个网页,提示蓝灯已经开启,在右下角

蓝灯

然后在命令行面板输入

npm install -g cordova ionic
4. 注意事项
4.1 安装完成后如果输入ionic出现以下提示

'ionic' 不是内部或外部命令,也不是可运行的程序或批处理文件。

这时可以先卸载ionic

npm uninstall -g ionic

然后重装nodeJS,重新安装ionic


5. 安装JDK
5.1 除了安装nodeJS,ionic,cordova之外还需要安装用来编译的工具,如JDK,android-sdk和apache-ant-1.10.0
不一定需要每一步的含义,只要配置完成,以后基本不会更改这些配置
5.2 下载JDK

下载地址 : http://rj.baidu.com/soft/detail/10463.html?ald

建议在百度中心下载,因为官网下载速度很慢,而且纯英文,不太懂英文很有可能直接懵逼

下载完成后进行安装,一个安装包,但是要安装2遍

第一遍是安装JDK,第二遍是安装JRE

千万不要将2个安装在同一目录下,会出错

安装完成后,需要配置环境变量

环境变量的位置: 我的电脑 - 鼠标右键 - 属性 - 环境变量

点击新建,变量名为 CLASSPATH,值为 .;%JAVA_HOME%\lib
Paste_Image.png

注意第一个字符是.不要漏写

找到 PATH(大小写无所谓) 双击
path

在后面加上 %JAVA_HOME%\bin; 确认

每个值都是以;隔开的,所以写之前,检查path值最后一个字符是不是;,如果不是加上;再写 %JAVA_HOME%\bin;

Paste_Image.png
点击新建,变量名为 JAVA_HOME,值为你的JDK路径,就是安装java的时候第一次提示你安装的路径

我的JDK 安装在E:/JDK下所以写E:/JDK


Paste_Image.png
6. 安装apache-ant-1.10.0 虽然我也不知道有什么用

下载apache-ant-1.10.0

下载地址: http://mirror.bit.edu.cn/apache//ant/binaries/apache-ant-1.10.0-bin.zip

下载完成之后不需要安装,直接将文件夹路径下的bin加入环境变量的path中
如我的apache-ant-1.10.0文件夹路径是E:\apache-ant-1.10.0,我需要添加E:\apache-ant-1.10.0\bin;
如图

Paste_Image.png
7. 最后一步,安装android-sdk

下载地址 : http://tools.android-studio.org/index.php/sdk

安装后在环境变量-path-中加入安装的路径\tools和安装的路径\platform-tools
如我的安装路径是E:\android-sdk-windows
我加入了

E:\android-sdk-windows\tools;
E:\android-sdk-windows\platform-tools;

配置好之后在你安装的路径下tools文件夹内双击 android.bat

Paste_Image.png

会出现这个界面,如果没有出现,则是第五步JDK安装或配置出错

Paste_Image.png

安装所有的Android 7.0包,由于我也是只成功过一次,所有保险起见还是全选

Paste_Image.png

然后安装,等待安装完成


Paste_Image.png

然后再安装

Paste_Image.png

Android SDK Tools
Android SDK Platform-tools
Android SDK Build-tools 24


到此环境就配置完成了 (生无可恋)

如果你觉得有帮助,请给我点个 (≧▽≦)/
如果觉得文章有错误,请留言指出,我也是刚开始学习,难免犯错
我的ionic 学习笔记将持续更新

相关文章

网友评论

    本文标题:ionic 1. 安装(window)

    本文链接:https://www.haomeiwen.com/subject/miakbttx.html