本人是在mac环境下进行配置的:

  1. 下载nodejs:https://nodejs.org/download/ 并双击安装

  2. Cordova and Ionic command-line tools 安装,直接在终端使用命令
    windows:

    npm install -g cordova ionic

    mac或linux:

    sudo npm install -g cordova ionic安装

    注意操作系统用户要有密码哦,不然安装过程中提示你输入密码,直接回车是通过不了的

  3. 好了,这时候该安装的都安装,下面来建一个ionic工程吧

    在合适的位置执行命令创建工程

    ionic start myApp

    ,要稍微等待一会完成工程创建,默认会创建一个有tab页的模板工程

  4. 如果工程创建成功,我们

    cd myApp

    目录下,执行命令

    ionic serve

    ,会自动打开浏览器显示页面

IONIC安卓环境搭建:

1、下载ant:http://ant.apache.org/bindownload.cgi

增加环境变量

(环境变量在当前用户根目录下的.bash_profile里,如果之前没有设置过默认是没有.bash_profile文件的,可以手工创建一个。)

export ANT_HOME=/Users/apple/Documents/work/apache-ant-1.9.4
export PATH=${PATH}:${ANT_HOME}/bin

2、下载安卓sdk,并添加环境变量

export ANDROID_HOME=/Users/apple/Documents/work/android-sdk-macosx/sdk
export ANDROID_TOOLS=$ANDROID_HOME/tools
export ANDROID_PLATFORM_TOOLS=$ANDROID_HOME/platform-tools
PATH=$PATH:$ANDROID_HOME:$ANDROID_TOOLS:$ANDROID_PLATFORM_TOOLS

3、安装对应的sdk版本

点击android-sdk-macosx/tools下面的android可以打开android sdk manager,在这里选择我们要安装的sdk版本,我装的是21

注意由于国内网络问题,列表打开会很慢,ssl-google。。。连不上,显示不了我要装的sdk版本,以至于我去找vpn翻墙,但是最后不发现不需要的,过了连不上的那一步,最终还是能把所有的版本刷出来的,但是要耐心等待很久,真的很久很久。。。

4、给项目添加安卓

ionic platform add android

一开始我下载的安卓sdk没有安装21这个版本,因此报错了

[Error: Please install Android target: "android-21".
Hint: Open the SDK manager by running: /Users/apple/Documents/work/adt-bundle-mac-x86_64-20131030/sdk/tools/android
You will require:
1. "SDK Platform" for android-21
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)]

参考上一步进行相应版本的安装即可

过程还还出现了下面的错误

Error: ANDROID_HOME is not set and "android" command not in your PATH. You must fulfill at least one of these conditions.

给目录设置写权限既可以解决 chmod -R 777 android-sdk-macosx

4、编译

ionic build android

中间发生错误:

ERROR : No emulator images (avds) found.

是因为我用了这个命令,

sudo ionic build android

不用加sudo来add 和build ,否则要先把模拟器打开再执行这个命令

编译成功后会在platforms/android/ant-build目录下生成apk文件,直接传到手机上就可以安装运行啦

5、模拟器运行

ionic emulate android

这个很慢,其实最后开发中基本都不用模拟器运行,直接在浏览器进行调试就ok了

IONIC IOS环境搭建:

因为是在mac系统下进行配置,所以容易多了

1、安装ios模拟器

sudo npm install -g ios-sim

2、添加ios平台、编译、模拟器运行

ionic platform add ios

ionic build ios
ionic emulate ios

.

mac系统下ionic环境配置的更多相关文章

  1. MAC系统下Sublime Text3 配置Python3详细教程

    MAC系统下Sublime Text3 配置Python3详细教程(亲测有效) https://blog.csdn.net/weixin_41768008/article/details/798590 ...

  2. mac系统下Eclipse + pydev配置python Interpreter

    mac系统下Eclipse + pydev配置python Interpreter   之前都在windows下使用Eclipse + pydev 进行开发,未发现什么异常,最近对wxpy.itcha ...

  3. mac系统下docker安装配置mysql详细步骤

    上文介绍了MacOS安装Docker傻瓜式教程,安装好后第一件事就决定把本地数据库迁移过来,那么首先就得安装mysql,下面就开始我们的安装之旅吧. 一.docker配置镜像加速器 我们使用docke ...

  4. iOS Mac系统下Ruby环境安装

    由EasyIOS引出的一系列问题:转载的上一篇CocoaPods安装和使用教程中说明了,为什么要使用cocoapods ,但是要安装cocoapods需要Ruby环境,安装Ruby环境首先需要安装Xc ...

  5. [转]MAC系统下Sublime Text3 配置Python3详细教程(亲测有效)

    原文地址: https://blog.csdn.net/weixin_41768008/article/details/79859008?tdsourcetag=s_pctim_aiomsg 这段时间 ...

  6. Windows系统下pthread环境配置

    记录下win7系统,vc6.0++编译器下配置POSIX多线程环境的步骤. 配置 下载地址 ftp://sourceware.org/pub/pthreads-win32/ 我下载的版本是 fpthr ...

  7. mac系统下Ruby环境安装

    在我们编写代码过程中,会用到一系列的第三方开源类库,我们可以选择手动去一个个添加需要的库,但这非常麻烦.因此我们可以使用CocoaPods来帮助我们自动添加.使用CocoaPods需要先安装Ruby环 ...

  8. Mac CLion下OpenGL环境配置

    1. 配置glew和glfw 终端下运行下面两句,安装完后在/usr/local/Cellar/下可以找到对应的目录. brew install glew brew install glfw3 效果如 ...

  9. Mac 系统下的环境变量

    1.查看电脑环境变量   -->echo $PATH 2. 新建环境变量   sudo vim ~/.bash_profile  输入密码 3. 按 I ,编辑新的环境变量地址,保存 退出 :w ...

随机推荐

  1. vue中路由返回上一个页面,恢复到上一个页面的滚动位置

    第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...

  2. MyBatis入门实例-包括实体类与数据库字段对应&CLOB字段处理

    1.我的开发环境是 jdk1.7+ecplise+oracle 11g 用到的jar包:mybatis-3.1.1.jar ojdbc6.jar 2.项目整体结构     3.首先配置conf.xml ...

  3. XFire Web Service

    Web Service 创建HelloWorldService项目 首先要启动Web Service Project 向导.该向导由三个页面组成,第一页设置Web项目配置的详细信息:第二页设置XFir ...

  4. 【elaseticsearch】elaseticsearch启动报错Caused by: org.elasticsearch.transport.BindTransportException: Failed to bind to [9300-9400]

    elaseticsearch启动报错 [es1] uncaught exception in thread [main] org.elasticsearch.bootstrap.StartupExce ...

  5. Selenium2+python自动化56-unittest之断言(assert)

    前言 在测试用例中,执行完测试用例后,最后一步是判断测试结果是pass还是fail,自动化测试脚本里面一般把这种生成测试结果的方法称为断言(assert). 用unittest组件测试用例的时候,断言 ...

  6. C\C++各路高手以及操作系统专家请进来杀死这个进程

    通常情况下编写一个程序,能够点击关闭button正常结束程序,也能够使用任务管理器结束任务,还能够使用taskkill等命令杀死进程,实在都不行也能够直接重新启动计算机. 可是,这些方法真的都管用吗? ...

  7. 2008技术内幕:T-SQL语言基础 单表查询摘记

    这里的摘抄来自<Microsoft SQL Server 2008技术内幕:T-SQL语言基础>,书中用到的案例数据库是这个 TSQLFundamentals2008 ,官网给出的连接是这 ...

  8. 定义和使用EL函数

    EL为表达式语言,在EL中,允许定义和使用函数.下面将介绍如何定义和使用EL的函数. 1. 定义和使用函数 函数的定义和使用分为以下3个步骤: (1)编写一个Java类,并在该类中编写公用的静态方法, ...

  9. C语言编译器不检查数组下标越界

    这两天被人问了一个问题说假如C/C++访问下表越界的数组元素会报错么,于是充满好奇心的我动手试了一下,WTF,果然没有报错,但是会给程序带来莫名其妙的结果(比如十次的循环但是变成了死循环,但八次却可以 ...

  10. ING【转载】处理大并发系列

    一直在处理高可用高并发的服务.看到网上有一个系列的文章,写的不错.跟进一下. 一:http://blog.csdn.net/feitianxuxue/article/details/8936802 二 ...