本人是在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. div模拟selection标签 下拉列表

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 2017微软 MVP 数据实践技术活动日(北京站)

    Power BI | 交互式数据可视化 BI 工具 EXCEL BI :无所不能的业务数据分析利器 EXCEL +POWERBI=EXCEL BI https://edu.hellobi.com/co ...

  3. 用最简单的例子理解适配器模式(Adapter Pattern)

    中国足球的水平虽然不高,但实际上,在每个城市会有一批足球爱好者,他们踢球.看球.懂球.有这样的2个足球爱好者,一个是左脚选手,另一个是右脚选手. public class PlayWithLeft { ...

  4. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

  5. Arcgis10.5 python按属性分割图层,属性相同分为一个图层

    # coding=utf-8 """ Source code for potential gp tool to create outputs based on attri ...

  6. Extjs Ajax 分页

    var storeCpye = new Ext.data.GroupingStore({ proxy : new Ext.data.HttpProxy({ url : 'cxgl_cpye.app?d ...

  7. C#中使用NLua z

    直接下载NLua编译好的版本在c#项目中使用,运行的时候会提示无法加载lua52.dll,但lua52.dll这个文件又是在运行目录下的. 其实NLua不是无法加载lua52.dll本身,而是找不到l ...

  8. 图文详解 Android Binder跨进程通信机制 原理

    图文详解 Android Binder跨进程通信机制 原理 目录 目录 1. Binder到底是什么? 中文即 粘合剂,意思为粘合了两个不同的进程 网上有很多对Binder的定义,但都说不清楚:Bin ...

  9. 操作系统Day1地址空间与地址生成

    1.地址空间分成(1)物理地址空间 (2)逻辑地址空间二者之间的关系:*逻辑地址空间的生成:程序——>汇编-->linker——>loader*物理地址的生成:内存的逻辑地址空间会有 ...

  10. 《阿里巴巴JAVA开发手册》里面写超过三张表禁止join这是为什么?

    分库分页.应用里做join 多表join性能很差 参考: 1.https://www.zhihu.com/question/56236190