angular+ionic 移动app 环境搭建

原创 booogle 教程 前端资源 109阅读 2018-09-05 10:06:28 举报

APP开发环境搭建手册(Windows)

  1. Windows 基础环境
    1.1.Node.js
    安装包:node-v8.9.4-x64.msi
    下载地址:https://nodejs.org/dist/v8.9.4/node-v8.9.4-x64.msi
    版本:Node.js v8.9.4,自带npm 5.6.0
    安装方法:直接下一步即可
    验证方法:
    点击开始=》运行=》输入"cmd" => 输入命令"node -v"

输入命令"npm -v"

1.2.Python
安装包:python-2.7.14.amd64.msi
下载地址:https://www.python.org/downloads/release/python-2714/
版本:2.7.14
安装方法:

选择Install for all users

选择默认地址点击Next

点击ADD python.exe to Path,选择图中红色部分
验证方法:命令行输入python --version

  1. Windows 项目基本环境(需要网络)
    2.1. ionic@3.19.0
    安装:点击开始=》运行=》输入"cmd" => 输入命令npm install -g ionic@3.19.0
    验证方法:命令行输入ionic –version

2.2. Cordova@8.0.0
安装:点击开始=》运行=》输入"cmd" => 输入命令npm install -g cordova@8.0.0
验证方法:命令行输入 cordova -version

2.3. @angular/cli@1.6.3
安装:点击开始=》运行=》输入"cmd" => 输入命令
npm install –g @angular/cli@1.6.3

验证方法:命令行输入 ng -v

  1. Android构建打包依赖
    3.1.Gradle
    安装文件:gradle-4.4.1-all.zip
    版本:4.4.1
    下载地址:https://services.gradle.org/distributions/gradle-4.4.1-all.zip
    安装方法:
    解压文件到目录

添加环境变量GRADLE_HOME,变量值指定到gradle文件目录

添加%GRADLE_HOME%\BIN;到Path

验证方法:命令行输入 gradle –v

3.2.Android SDK
安装文件:installer_r24.4.1-windows.exe
下载地址:http://dl.google.com/android/installer_r24.4.1-windows.exe
安装方法:直接点击下一步即可,安装完毕打开安装后目录

双击打开SDK Manager,打钩选择Tools及所需andriod版本的Pckages(需要联网)

点击Install 4 packages后,弹出提示框并选择Accept License,点击Install开始安装packages

配置Android SDK环境变量:
在path中添加Android SDK文件中tools目录路径,如:

在path中添加Android SDK文件中platform-tools目录路径,如:

3.3.Java JDK
安装包:jdk-8u151-windows-x64.exe
下载地址:http://download.oracle.com/otn-pub/java/jdk/8u151-b12/e758a0de34e24606bca991d704f6dcbf/jdk-8u151-windows-x64.exe
版本:8u151
安装方法:
选择默认安装地址点击下一步

弹出此项继续点击Next

点击Close完成安装
配置环境变量JAVA_HOME C:\Program Files\Java\jdk1.8.0_151

在“系统变量”选项区域中查看PATH变量,如果不存在,则新建变量 PATH,否则选中该变量,单击“编辑”按钮,在“变量值”文本框的起始位置添加“%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;”,单击确定按钮,如图:

在“系统变量”选项区域中查看CLASSPATH 变量,如果不存在,则新建变量CLASSPATH,否则选中该变量,单击“编辑”按钮,在“变量值”文本框的起始位置添加“.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;”。如图:

验证方法:
命令行输入java –version命令

  1. Windows系统开发工具
    4.1.WebStorm-2017.3.2(需要license)
    安装文件:WebStorm-2017.3.2.exe
    下载地址:http://data.services.jetbrains.com/products/download?code=WS&platform=windows
    安装方法:直接点击下一步即可
    4.2.Visual Studio Code
    安装文件:VSCodeSetup-x64-1.19.1.exe
    下载地址:https://go.microsoft.com/fwlink/?Linkid=852157
    安装方法:直接点击下一步即可
    插件安装:

插件列表:
(1)html相关
Close HTML/XML tag 自动关闭HTML/XML标签;
HTMLHint HTML格式支持;
Auto Close Tag 修改html标签时,自动修改匹配的标签;
HTML Boilerplate对html5风格的基本支持;
HTML Snippets 含括全部html5的标签;

(2)javascript相关
JavaScript(ES6) code snippets ES6语法代码片段;
TSLint 对typeScript代码规范性扫描;
Document This 自动生成ts、js文件中文档注释;

(3)css/scss相关
IntelliSense for CSS Class names 在编辑中提供css历史类名提示、扩展;
SCSS IntelliSense 对SCSS编辑的支持;

(4)框架相关
Angular v5 Spnippets 适用于angular的代码片段提示;
Ionic 2/3/4 Command width Snippets 提供ionic框架的命令和代码片段;
Crodova Tools 适用于cordova代码及命令提示等;

(5)代码美化
Beautify 整体代码样式优化包括html 、javascript、css;
Beautify css/sass/scss/less 专用于在css/sass/scss/less中代码样式优化;
Color Highlight 颜色值在代码中高亮;
(6)git相关
Git History Diff 可见git历史中commit详细信息;
GitLens 显示文件最近的commit和作者,显示当前行commit信息;

(7)npm相关
npm 提供VSCode中npm命令;
npm Intellisense 模块导入时,提示已安装模块名称;

(8)调试
Debugger for Chrome 支持结合在chrome浏览器中代码调试;

4.3. Android Studio
安装文件:android-studio-ide-171.4408382-windows.exe
安装方法:直接点击下一步即可

(OS X)

  1. OS X 基础环境
    1.1. Node.js
    安装包:node-v8.9.4.pkg
    下载地址:https://nodejs.org/releases/
    版本:Node.js v8.9.4,自带npm 5.6.0
    安装方法:直接下一步即可
    验证方法:
    终端输入命令 “node –v”

终端输入命令 "npm -v"

1.2.Python
安装文件:python-2.7.14-macosx10.6.pkg
下载地址:https://www.python.org/downloads/release/python-2714/
安装方式:直接点击“继续”即可
验证方式:命令行终端输入python —version,如图:

  1. OS X项目基本环境(需要网络)
    2.1. ionic@3.19.0
    安装:终端输入命令 sudo npm install -g ionic@3.19.0
    验证方法:终端输入命令 ionic –version

2.2. Cordova@8.0.0
安装:终端输入命令 sudo npm install -g cordova@8.0.0
验证方法:终端输入命令 cordova -version

2.3. @angular/cli@1.6.4
安装:终端输入命令 sudo npm install –g @angular/cli@1.6.4
验证方法:终端输入命令ng -v

  1. IOS 依赖打包
    3.1.Gradle
    安装文件:gradle-4.4.1-all.zip
    版本:4.4.1
    下载地址:https://services.gradle.org/distributions/gradle-4.4.1-all.zip
    安装方法:解压到/Users/manulife/gradle/gradle-4.4.1
    命令行终端输入:vi ~/.bash_profile
    点击I键添加环境变量:
    export GRADLE_HOME=/Users/manulife/gradle/gradle-4.4.1
    export PATH=${PATH}:${GRADLE_HOME}/bin
    验证方法:终端输入命令gradle –v,如上图。
    3.2. Java JDK
    安装文件:jdk-8u151-macosx-x64.dmg
    版本:8u151
    下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
    安装方法:打开dmg,安装。
    环境变量配置:
    在终端输入 sudo vim /etc/profile
    按下i,显示insert,进入输入模式
    输入配置:
    JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_144.jdk/Contents/Home"
    export JAVA_HOME
    CLASS_PATH="$JAVA_HOME/lib"
    PATH=".$PATH:$JAVA_HOME/bin"

按ESC,进入保存
输入 :wq! 保存
输入 source /etc/profile ,运行profile配置。

检查环境:输入 echo $JAVA_HOME,得到配置的路径,说明配置完毕。

3.3.Android SDK

安装方法:解压android-sdk到/User/Manulife/android-sdk
添加环境变量:vi ~/.bash_profile
添加export ANDROID_HOME=/users/manulife/android-sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
3.4. Xcode打包工具

确认已经安装Xcode,如未安装则到APP Store中下载并安装。

  1. OS X开发工具
    4.1.WebStorm-2017.3.2(需要license)
    安装文件:WebStorm-2017.3.2.dmg
    下载地址:http://data.services.jetbrains.com/download/download-thanks.html
    安装方法:直接点击下一步即可
    4.2.Visual Studio Code
    安装文件:VSCode-darwin-stable.zip
    下载地址:https://code.visualstudio.com/Download
    安装方法:解压文件,直接打开应用即可
    插件安装:同windows版visual studio code中一样。
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复