网上有多篇ionic开发环境搭建的文章,但是针对windows下的说明比较少,所以在这里再补充一篇windows下的开发环境搭建文章
1.nodejs
nodejs官网:
它会自动检测当前OS类型,并提供下载地址
Windows
image.png
下载完成后,双击打开进入安装界面,选择安装地址,一路下一步即可
image.png
image.png
image.png
image.png
image.png
image.png
2.java jdk 1.8
jdk安装比较简单,也不需要什么太多技巧,将jdk安装包下载下来,直接双击进行安装即可
1.JDK下载地址：
http://www.oracle.com/technetwork/java/javase/downloads/index.html
点开链接你应该看到如下图所示的界面：
image.png
2.点击上图中箭头所指的地方，会出现下面的这个界面，此时你需要根据你的电脑系统来进行对应的版本进行选择，在选择版本和下载之前你需要首先接收协议，具体界面如下图所示：
image.png
3.双击以后进行JDK的安装（记得按照第二幅图修改一下安装路径，不要什么东西都安装到系统盘。。。）：
（1）双击进行安装界面如下所示：
image.png
image.png
image.png
image.png
image.png
4.安装完成后，需要进行环境变量的配置，右键我的电脑—属性—-高级系统设置就会看到下面的界面：
image.png
5.点击上图中的环境变量，然后开始环境变量的配置：
（1）点击系统变量下面的新建按钮，变量名JAVA_HOME（代表你的JDK安装路径），值对应的是你的JDK的安装路径。
image.png
（2）继续在系统变量里面新建一个CLASSPATH变量，其变量值如下图所示：
image.png
此处需要注意：最前面有一个英文状态下的小圆点。。。。很多初学者在配置环境变量的时候就会跌倒在这个坑里。
（3）在你的系统变量里面找一个变量名是PATH的变量，需要在它的值域里面追加一段如下的代码：
%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
此时你应该在你原有的值域后面追加，记得在原有的值域后面记得添加一个英文状态下的分号。
最后点击确定，此时JDK的环境变量配置就完成了。
6.测试自己所配置的环境变量是否正确
（1）WINDOWS+R键，输入cmd，进入命令行界面，如下所示：
image.png
（2）输入java -version命令，可以出现如下图的提示，你可以看你安装的JDK版本。
image.png
（3）输入javac命令可以出现如下的提示：
image.png
（4）输入java命令就会出现如下图所示的结果
image.png
3.Android SDK
3.Android SDK
比较推荐的安装方式是使用AndroidStudio 来安装安卓环境,虽然在日常开发中,我们绝大部分是不会使用到该工具,但是在某一些情况下,还是可能会遇到需要使用它来查看一些报错信息的.
由于网络原因,我们可以再国内的网站去下载AndroidStudio
地址: http://www.android-studio.org
进入页面后,根据自己不同的平台,选择对应的版本
image.png
下载完成后,双击安装包进入安装界面
image.png
image.png
image.png
image.png
image.png
image.png
安装完成后,第一次运行,会进入如下界面
点击Next
image.png
选择Standard,点击Next
image.png
进入该界面选择sdk位置,如果已经有sdk的文件夹,可以直接选择该文件夹,减少不必要的文件下载,选择好后,点击Next;
sdk安装不推荐存在有空格的目录!
image.png
点击Finish,进入下载界面
image.png
这里会下载sdk相关的文件,下载完成后,点击finish
image.png
下载完成后,点击Finish
image.png
如果不想安装AndroidStudio ,也可以直接拷贝其他人的sdk文件到你的电脑上,配置环境变量后,一样适用!
设置ANDROID_HOME
1.右键点击"我的电脑",选择"属性",点击"高级系统设置",打开窗口后,点击"环境变量",设置环境变量信息
image.png
2.在"系统变量"中,新建ANDROID_HOME,输入sdk地址
image.png
3.点击"path",新建两条记录路,将sdk路径下的 tools和platform-tools配置进去,点击确定完成设置
image.png
重新打开一个cmd窗口,在cmd窗口中输入:adb ,有信息输出,表示安装成功
image.png
**4.cordova **
cordova安装命令:
npm install -g cordova
该命令安装的是默认最新版本,目前我们使用的是6.5.0,安装该版本命令是:
npm install -g [email protected]
如果使用其他版本,则同样道理,在@后直接增加版本号即可
由于国内一些网络原因,所以需要做一些针对网络的处理
方法1.翻墙,通过软件翻墙后再进行安装
方法2.淘宝镜像,国内有淘宝镜像可以使用,这种方式安装起来会比较快,比较推荐该方式
设置方式:
npm config set registry https://registry.npm.taobao.org
配置后查看是否设置成功:
执行:
npm config get registry
如果想要还原回原来的镜像路径:
则执行:
npm config set registry https://registry.npmjs.org/
image.png
由于通常失败都是网络或权限不足导致的,所以windows下可以尝试使用管理员模式打开cmd窗口,Mac环境下,可以加sudo以管理员模式,执行install命令后会进入安装界面:
image.png
ionic的安装和前面在mac下安装方式类似,都是只需要使用命令行进行安装即可,前文地址:https://www.jianshu.com/p/3c0c14cfb578
安装过程中,没有报任何错误,则表示已经安装成功
image.png
在cmd窗口下直接输入:cordova -v 查看版本信息,显示信息则表示安装成功
image.png
5.Webstorm/Sublime/VSCode
通常我们开发的工具是Webstorm,不过该工具可能会占用较大内存,所以如果觉得会有卡顿问题,也可以使用Sublime或VSCode做开发,具体安装步骤就不做演示,自己独立安装完成即可
**6.Chrome **
由于我们日常的开发都是在浏览器上进行的,所以我们使用的是Chrome浏览器
因为需要请求后台数据,所以需要做跨域处理
设置也比较简单:
1.找到Chrome 浏览器桌面快捷方式->右键->属性->快捷方式
2."目标路径"后增加: --disable-web-security --user-data-dir,如果路径上有双引号,则需要加在双引号后,点击确定完成设置
image.png
点击确定后,重新打开Chrome浏览器,浏览器中出现这个黄色的提醒信息,则表示跨域成功
image.png
至此,app开发前端环境搭建完成
jdk安装部分由于比较简单,楼主电脑也已经安装过jdk了,就没有再重新安装一遍,jdk安装来源博客:http://blog.csdn.net/u012934325/article/details/73441617