gsp412
gsp412

ionic3开发环境搭建（以win为例）

Java环境配置

1 安装jdk

1.1 官网下载jdk安装包进行安装

Java SE Development Kit 8 Downloads

1.2 或者找到jdk解压包进行安装（推荐）

2 配置JAVA_HOME

环境变量

JAVA_HOME： [jdk路径] //不要存在中文或空格

path：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

CLASSPATH: .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar


Android 环境配置

1 下载 android studio (推荐 解压包)

Android Studio 中文网

下载后解压或安装

2 下载 Android sdk (推荐 解压包)

Android SDK

下载后解压或安装 

3 配置ANDROID_HOME

环境变量

ANDROID_HOME： [android sdk 路径]  //不要存在中文或空格

path：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

4 配置GRADLE_HOME

Android环境在配置完第三步实际上已经可以使用了，但是因为现在Android项目都是依赖gradle进行package管理的，又因为长城原因，gradle在进行联网下载的时候是比较困难的，所以我们还需要配置一下gradle

gradle

选择你需要的版本进行下载解压；

环境变量

GRADLE_HOME： [gradle 解压目录] //不要存在中文或空格

path： %GRADLE_HOME%\bin


安装Node.js

1 下载安装Node.js

node.js

双击进行安装

2 安装Node.js的目的

使用Node.js的包管理（npm）安装Cordova ionic 和ionic工程的依赖包

能够起一个Node.js的服务，使ionic的调试更加便利

3 映射到淘宝镜像

在国内链接npm的服务器非常不稳定，所以我们最好是配置一下国内的镜像。映射到淘宝镜像的方式为：

打开 CMD，执行以下命令

$ npm config set registry https://registry.npm.taobao.org

配置淘宝源（持久化）

执行以下命令检查registry配置是否成功

$ npm config list


安装 Cordova 和 Ionic

1 Cordova 是干嘛的

Cordova 是时下最流行的h5页面同手机原生系统进行交互的解决方案

cordova官网

而且Cordova的官方插件库中也提供有丰富的基础插件

cordova插件库

2 Ionic3又是啥

ionic3是一套App混合开发框架

3 安装

cmd中执行一下命令

// [i]  install的意思 [-g] 指全局安装 [cordova / ionic] 安装对象 

$ npm i -g cordova   

$ npm i -g ionic

安装完成后执行以下命令检查

$ cordova -v

$ ionic -v

若均正常显示版本号，则安装成功


搭建ionic3 测试工程

1 了解ionic官网

ionic 官网首页

ionic 开发文档

2 创建工程

$ ionic start [] [