ionic安装

Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs。下载安装:http://nodejs.org/
安装完成之后打开PowerShell输入命令node -v和npm -v验证是否安装成功,如果返回版本号则说明成功。
在PowerShell命令行中执行:

npm install -g cordova ionic 
这是使用npm包管理器安装cordova和ionic,-g的意思是全局安装,全局安装后在PowerShell中任何目录下都可以使用cordova和ionic的命令。
ps:如果报错,说明被墙了. 尝试换源
1.换源
A.config中设置
npm config set registry https://registry.npm.taobao.org
npm info underscore (如果上面配置正确这个命令会有字符串response)

B.命令设置
npm --registry https://registry.npm.taobao.org info underscore

C.编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org
D.安装cnpm.

代理设置
npm config set proxy=http://127.0.0.1:1080
npm config set https-proxy http://server:port

上面四种都能达到换淘宝npm源的效果


//安装Cordova
npm install -g cordova
//安装Ionic
npm install -g ionic
//创建项目

ionic start myApp tabs   //创建带有top栏和bottom栏的示例项目
ionic start myApp sidemenu //创建带有左侧带有menu栏的示例项目
ionic start myApp blank //创建空白项目

cd myApp
//添加编译环境, 
ionic platform add android
ios的 ionic platform add ios 估计要在ios下运行

//查看已安装的环境
ionic platform list

//编译.
ionic build android
有可能报错.将ionic换成cordova试试

cd myApp
cordova platform add android
cordova build android
cordova emulate android

编译成功后可在下面的目录中找到编译好的apk文件
C:\Users\Aust\myApp\platforms\android\build\outputs\apk


打开本地的nodejs测试
ionic serve 运行成功会自动打开http://localhost:8100/#/tab/dash 页面 默认支持lievereload 


在手机测试,连上adb(或者运行Genymotion),再运行下面命令

adb version //查看adb连接情况

ionic run android //在adb上发布运行. 会自动打包并安装到手机上

在部署到移动端后也可以开启livereload的,我们只需要修改下我们run命令参数:

ionic run android --livereload -c -s

这是android的调试模式,无论在虚拟机上还是在手机上都可以实现livereload,不用每次开发完成编译再部署!-c是开启客户端日志输出,-s是开启服务器端日志输出。

而ios相对麻烦些,

先安装ios-deploy

npm install -g ios-deploy

我们也同样执行:

ionic run ios --livereload -c -s --device

ionic  emulate ios -livereload -consolelogs -serverlogs

只要等他提示Build Success之后,我们在xcode上面运行虚拟机或者真机也可以实现livereload。

ios打包、android打包

能使用Ionic来开发app的很可能对Ios和android的app打包发布流程不是很熟悉,我这里简单说明下:
Android
Android的打包比较简单执行命令:

ionic build android -release 

找到www/platform目录下生成的apk包,此时的apk还不能被安装到手机上,还需要一步签名操作,大家可以参考:
http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html

IOS
ipa文件的打包需要现在apple develop网站上注册一个账号,在网站申请生产环境的证书导入到你的开发机中和开发机绑定才可以使用xcode导出,详情参阅:
http://blog.csdn.net/songrotek/article/details/8448331
http://www.mexiqq.com/2014/07/25/xcode6+ios8%E6%9C%80%E6%96%B0%E7%9C%9F%E6%9C%BA%E8%B0%83%E8%AF%95%E6%95%99%E7%A8%8B/

ionic.project 中像这样设置代理:

ionic入门的更多相关文章

  1. Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...

  2. Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...

  3. Ionic 入门与实战之第一章:Ionic 介绍与相关学习资源

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念.发展历程.适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源. 原文发表于我的技 ...

  4. Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许 ...

  5. ionic 入门创建第一个应用demo

    一.ionic卸载 1.清除旧版本的ionic框架 npm uninstall -g ionic npm uninstall -g cordova npm cache clear npm cache ...

  6. ionic入门01

    总述 ionic是一个强大的混合式/hybrid HTML5移动开发框架,特点是使用标准的HTML.CSS和JavaScript,开发跨平台的应用. 接下来,敝人会从0到1采用ionic构建一个简单的 ...

  7. ionic入门之色彩、图标、边距和界面组件:列表

    目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...

  8. Ionic 入门

    什么是lonic 简单来说lonic就是一款HTML5移动端应用开发框架,通过配合AngularJS和Cordova/PhoneGap可以开发一款移动端app,值得注意的是它创建的app是混合移动应用 ...

  9. ionic入门之AngularJS扩展基本布局

    目录: 标题栏 : ion-header-bar 页脚栏 : ion-footer-bar header/footer : 样式及内容 内容区 : ion-content 滚动框 : ion-scro ...

  10. ionic入门之AngularJS扩展(一)

    ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML. CSS和JavaScript,开发跨平台(目前支持:Android.iOS,计划支持:Wind ...

随机推荐

  1. VS发布 错误 未能将文件 复制到

    在VS内部编译及试运行的时候并为出现错误一切正常 当将项目发布时提示XXX文件无法复制到对应的obj文件夹下 未能将文件 upfile\team\2013\0328\20130328112637296 ...

  2. app操作的一些命令

    这里的操作都是在windows下,在android SDK安装好之后就可以连接实体手机或者模拟器操作 1.查看连接的手机或者模拟器 adb devices 结果如下: 2.查看某个app的包名和act ...

  3. 高手速成android开源项目【项目篇】

    主要介绍那些Android还不错的完整项目,目前包含的项目主要依据是项目有意思或项目分层规范比较好.Linux项目地址:https://github.com/torvalds/linuxAndroid ...

  4. tls1.2 rfc5246

    注:本文省略了部分开发协议才涉及到的内容,如字段类型的定义以及字段长度的运算,主要聚焦理解tls协议的运作方式,用于问题定位 tls协议包含2层协议:TLS Record 协议和TLS Handsha ...

  5. redis.properties

    #### env:${env} redis.maxIdle= ##最小空闲数 redis.minIdle= ##最大连接数:能够同时建立的“最大链接个数” redis.maxTotal= #每次最大连 ...

  6. 【jQuery源码】整体架构

    jQuery源码可以精简为以下内容: 方框上面的代码根据Jq注释我们可以知道是对AMD规范的支持. jQuery整体上被包裹在一个匿名函数中,这个匿名函数再作为另一个匿名函数的参数被传入,形参fact ...

  7. .Net Core项目添加日志功能

    一.微软内置的日志组件 在.Net Core中使用模板新建的Web Api项目时,会自动加入日志功能.只需要在控制器中注入ILogger就可以了.命名空间为:Microsoft.Extensions. ...

  8. (转)分享一个技巧,利用批处理调用ruby脚本(可能你为路径苦恼)

    #关闭命令显示 @echo off #提示信息 echo Now,listing the controller,please not shutdown the DOS File! #切换到当前路径,. ...

  9. c# 导出表格

    var record = m_editor.getMasterRecord(); var Check_Id = record.Check_Id; var url = "/Storage/St ...

  10. 远程登陆Linux服务器

    Xshell 强大的ssh客户端,通过互联网到远程主机.下载:http://www.netsarang.com/download/down_form.html?code=622 1.安装完,新建会话 ...