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. LeetCode--No.013 Roman to Integer

    13. Roman to Integer Total Accepted: 95998 Total Submissions: 234087 Difficulty: Easy Given a roman ...

  2. jfixed使固定行列可编辑表格

    功能: 固定行列 可以在表格直接编辑 使用ajax对数据操作 使用tab键在可编辑列切换简单介绍一下jfixed 表格插件, jfixed /jfixed.rar

  3. Java RMI HelloWorld

    Java RMI HelloWorld   RMI 远程方法调用. 顾名思义就是可以像调用本地程序方法一样调用远程(其他JVM)的程序方法.   分为3个部分: Stub:中介,代理. 封装了远程对象 ...

  4. Android 系统内核层与 Linux Kernel 的比较

    Android 内核具有和标准 Linux 内核一样的功能,主要实现了内存管理.进程调度.进程间通信等功能.但在文件系统.进程间通信.内存管理等方面存在差异. 1.文件系统.移动设备采用的大多不是硬盘 ...

  5. interface21 - web - Log4jConfigListener(Log4j加载流程)

    前言 最近打算花点时间好好看看spring的源码,然而现在Spring的源码经过迭代的版本太多了,比较庞大,看起来比较累,所以准备从最初的版本(interface21)开始入手,仅用于学习,理解其设计 ...

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

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

  7. 从零开始学 Web 之 CSS3(八)CSS3三个案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 通过GitHub和GoDaddy搭建静态个人博客

    一.创建GitHub个人主页 通过GitHub创建个人博客的好处:无广告,因为页面代码全是你自己写的:免费,不用买主机:装X:设计和编码练习. 1. 在GitHub上创建一个新的repository, ...

  9. PHP的UTF-8中文转拼音处理类

    <?php /** * PHP 汉字转拼音 * @author Jerryli(hzjerry@gmail.com) * @version V0.20140715 * @package SPFW ...

  10. python 输出颜色与样式的方法

    上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python 输出颜色的样式与方法的文章 ...