Ionic3开发教程 - 环境准备（1）

Ionic3开发系列教程
Ionic3开发教程 - 环境准备（1）
Ionic3开发教程 - 开发（2）
Ionic3开发教程 - 发布Android版本（3）
Ionic3开发教程 - 发布IOS版本（4）
Ionic3开发教程 - 更新（5）

基本依赖环境：
1、Nodejs
2、JDK
3、SDK
4、Gradle
5、ionic@3.20.0
6、VSCode
7、热更新插件

1. Nodejs安装
下载地址：下载地址、中文官网下载
安装时，一路“下一步”，安装完成后。打开cmd，输入node -v,返回版本信息，说明nodejs安装成功；
还需要做两步调整：

1. 修改全局包存放地点，默认位置是在C盘
   执行npm config ls查看当前存放具体位置。
   image.png
   修改存放位置：

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

2. 修改系统变量
   进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入：D:\Develop\nodejs\node_global\node_modules
3. 修改用户变量
   将【用户变量】下的【Path】修改为：D:\Develop\nodejs\node_global

参考文档：Node.js安装及环境配置之Windows篇

2. JDK安装
下载地址：下载地址 提取码：nlta

配置环境变量

• 添加系统变量【JAVA_HOME】：D:\project\tool\Java\jdk_9.0.1
• 设置【Path】系统变量，新增两条：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
• 添加系统变量【classpath】：%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

执行java -version，验证是否安装成功；

image.png

3. SDK安装
下载地址：下载地址 提取码：b6em

配置环境变量

• 添加系统变量【ANDROID_HOME】：C:\Program Files\SDK
• 设置【Path】系统变量，新增两条：;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools。（注意分号）
  执行android -h，验证是否安装成功；
  image.png

4. Gradle安装
下载地址：下载地址 提取码：bd18

配置环境变量

• 添加系统变量【GRADLE_HOME】：C:\Program Files\SDK\gradle-4.1
• 设置【Path】系统变量，新增一条：;%GRADLE_HOME%\bin。（注意分号）

执行gradle -v，验证是否安装成功；

5. ionic安装
执行下面命令，安装ionic和cordova基础包。

npm i ionic@3.20.0 cordova -g

如果安装很慢，可以转用npm阿里镜像，npm install -g cnpm --registry=https://registry.npm.taobao.org，然后执行：

cnpm i ionic@3.20.0 cordova -g

6. Vscode安装
下载地址：官网地址

如何汉化

1. 【Ctrl+Shift+P】，在弹出的搜索框中输入【configure language】，然后选择搜索出来的【Configure Display Language】,如下图：

将VSCode设置成中文语言环境

2. 然后进入插件库搜索，在搜索结果中选择中文插件，install安装完成后重启VsCode就可以了。

win10新系统中VsCode终端执行命令行报错问题

image.png
1、以管理员方式打开Power Shell
2、执行get-ExecutionPolicy，如果执行结果为Restricted则说明禁用，需要开启，如下
3、执行set-ExecutionPolicy RemoteSigned，在是否更改执行策略选项中选择[Y] 是(Y)。
image.png

7. 热更新插件

npm install -g cordova-hot-code-push-cli

具体操作，请查看：ionic3热更新详细步骤

注：以上所有命令行操作，均使用管理员身份运行Cmd。