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. Go并发编程之美-CAS操作

    摘要: 一.前言 go语言类似Java JUC包也提供了一些列用于多线程之间进行同步的措施,比如低级的同步措施有 锁.CAS.原子变量操作类.相比Java来说go提供了独特的基于通道的同步措施.本节我 ...

  2. 14-03 java BigInteger类,BigDecimal类,Date类,DateFormat类,Calendar类

    BigInteger类 发 package cn.itcast_01; import java.math.BigInteger; /* * BigInteger:可以让超过Integer范围内的数据进 ...

  3. 从零开始学 Web 之 HTML(一)认识前端

    大家好,这里是 Daotin 从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享 ...

  4. docker私有仓库-https+nginx

    一.概述 使用的是registry-2.4版本,因为在这个版本开始提供了garbage-collect,能够清理掉blobs,2.1开始提供了api的删除功能,但是只是删除的index并没有释放掉磁盘 ...

  5. Java设计模式学习记录-责任链模式

    前言 已经把五个创建型设计模式和七个结构型设计模式介绍完了,从这篇开始要介绍行为型设计模式了,第一个要介绍的行为型设计模式就是责任链模式(又称职责链模式). 责任链模式 概念介绍 责任链模式是为了避免 ...

  6. SpringMVC+jquery.uploadify 上传文件

    前言 以前用Asp.net MVC+uploadify上传文件,最近学习SpringMVC,所以就用SpringMVC+uploadify做个上传文件的demo. 刚开始用form表单的方式提交,在C ...

  7. GNU μC/OS-II 在 S3C2440 上中断的实现

    上一篇文章介绍了S3c2440的中断体系结构,今天我们来分析一下GNU-uC/OS-II在S3c2440上中断的实现. 首先找到IRQ的中断的向量,位于 2440init.S : OK ,我们通过名字 ...

  8. 前端迷思与React.js

    前端迷思与React.js 前端技术这几年蓬勃发展, 这是当时某几个项目需要做前端技术选型时, 相关资料整理, 部分评论引用自社区. 开始吧: 目前, Web 开发技术框架选型为两种的占 80% .这 ...

  9. Java,第16天,属性与方法;

    public class 类名{ private double 财产 = 0://设一个财产的属性: public void 一个月工资(){ this.财产 +=4500: }//设一个方法增加财产 ...

  10. Vue 系列之 样式相关

    Class 与 Style 绑定 动态修改元素样式 <head> <meta charset="utf-8" /> <meta http-equiv= ...