Ionic+Angular 开发移动应用一：环境搭建

2019年9月15日 216次阅读 来源: 江小湖Laker

《Ionic+Angular 开发移动应用一：环境搭建》

欢迎交换友链： Laker’s Blog–进击的程序媛
Github：https://github.com/younglaker
V信: lakerHQ （请注明‘来自博客’）

介绍

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic 特点

  • ionic 基于Angular语法，简单易学。

  • ionic 是一个轻量级框架。

  • ionic 提供了适合移动APP的UI设计

  • ionic 性能优越，运行速度快。

准备

在有点windows、linux安装环境的经验和已配好一部分环境的情况下，这次环境安装还是耗费了一天，现在前端开发真是越来越多准备工作，安装一次就再也不想动了。

本文讲叙述在win7和ubuntu下的配置过程。

安装ionic

$ npm install -g
$ ionic info
******************************************************
 Dependency warning - for the CLI to run correctly,
 it is highly recommended to install/upgrade the following:

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`

******************************************************

Your system information:

 You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.5.0

Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed //mac下再装 npm install ios-deploy -g
ios-sim version: Not installed  //mac下再装 npm install ios-sim -g
OS: Windows 7
Node Version: v7.6.0
Xcode version: Not installed


******************************************************
 Dependency warning - for the CLI to run correctly,
 it is highly recommended to install/upgrade the following:

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`

******************************************************

cordova

$ npm install -g  cordova
$ cordova -v  // 必须运行一下，待会会问是否匿名跟踪日志，必须回答才能生效
? May Cordova anonymously report usage statistics to improve the tool over time? (t/n)

安卓SDK

为了打包成安卓APP

下载地址: http://tools.android-studio.o…
备用下载: http://pan.baidu.com/s/1bYhyai 密码: m3rg

windows：

先下载java jdk安装 java 环境，1.8以上版本，添加java环境变量：

  • 系统变量添加（不是“Administrator的用户变量”）：

    JAVA_HOME=C:\Program Files\Java\jdk1.8.0_121
    # 安装地址，之前有配过其他版本java，直接改这里JAVA_HOME的地址，path就不用管了

    CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
    # %JAVA_HOME% 前面有个 .;

  • PATH添加：

    %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

解压android-sdk压缩包，放到一个空间较大的磁盘，找到SDK Manager更新SDK Manager，安装默认选择的13个包，再点击每个包变成打钩状态，再install。安装很久，有十几G。

《Ionic+Angular 开发移动应用一：环境搭建》

《Ionic+Angular 开发移动应用一：环境搭建》

添加环境变量：

  • 系统变量添加（不是“Administrator的用户变量”）：

    ANDROID_HOME=C:\android-sdk-windows // 压缩包解压地址

  • PATH添加：

    %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

tools目录运行android命令,platform-tools目录运行adb命令

ubuntu

参考 https://gist.github.com/wenzh…

安装java环境

$ sudo apt-get install openjdk-8-jre-headless
# $ java -version
# 安装andoid-sdk用

$ sudo apt-get install openjdk-8-jdk
# javac -version
# 打包android应用用

解压安卓SDK压缩包，进入tools文件，运行（要安装很久）：

android update sdk --no-ui

添加环境变量，命令行输入：

$ vi ~/.bashrc

vim命令: crtl+end-到底部，i-输入，ESC-退出输入，:x -保存退出，:q! -不保存退出vim， :w -保存文档，但不退出vim

添加：

# andoid
export ANDROID_HOME=/home/laker/Downloads/android-sdk-linux #前面压缩包解压地址
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
$ source ~/.bashrc

Ionic Lab

Ionic Lab 是桌面版的开发环境，如果你不喜欢使用命令行操作，可以用 Ionic Lab 编译，运行，和模拟运行Ionic的应用程序。
支持Window、Mac OS X、Linux。已于16年12月停止维护。
备用下载： http://pan.baidu.com/s/1i4GYflV 密码: ac14

    原文作者：江小湖Laker
    原文地址: https://segmentfault.com/a/1190000009215725
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞