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. vue 自学笔记(6) axios的使用

    前情提要:axios 的使用 axios是一个ajax 的包,主要在node.js 使用 axios 的官网 https://www.kancloud.cn/yunye/axios/234845 一: ...

  2. LeetCode:104_Maximum Depth of Binary Tree | 二叉树的最大深度 | Easy

    要求:求二叉树的深度(二叉树的深度为最远叶子节点到根节点的距离,即根节点到最远叶子节点的距离) Given a binary tree, find its maximum depth. The max ...

  3. Python又把GUI界面攻下了,今天就告诉你怎么玩

    0.引言 学Python这么久了,一直想做个界面出来,最近发现Python有个内置库tkinter,利用它可以很轻松做出一些简易的UI界面,首先来看Python官方对Tkinter的说明: The t ...

  4. Python函数学习——初步认识

    函数使用背景 假设老板让你写一个监控程序,24小时全年无休的监控你们公司网站服务器的系统状况, 当cpu\memory\disk等指标的使用量超过阀值时即发邮件报警, 你掏空了所有的知识量,写出了以下 ...

  5. [NOIP模拟赛] 序列

    Description 给定一个1~n的排列x,每次你可以将x1~xi翻转.你需要求出将序列变为升序的最小操作次数.有多组数据. Input 第一行一个整数t表示数据组数. 每组数据第一行一个整数n, ...

  6. 【杂谈】线程中断——Interrupt

    前言 以前有一个错误的认识,以为中断操作都会抛出异常,后来才发现并不是这样,所以今天就来做一个关于中断的总结. 如何关闭线程 已被弃用的Stop方法 早期,Thread类中有一个stop方法,用于强行 ...

  7. [TensorFlow] Introducing TensorFlow Feature Columns

    Welcome to Part 2 of a blog series that introduces TensorFlow Datasets and Estimators. We're devotin ...

  8. 牛刀小试MySQL--innodb_flush_log_at_trx_commit小结

    参数名:innodb_flush_log_at_trx_commit 参数值: 0 事务提交的时候,不会去刷日志缓存区,也不会立马写入至日志文件中.这种设置最危险.如果数据库挂了且运气不好,数据库的最 ...

  9. 4.移植uboot-使uboot支持DM9000网卡

    在上一章,使uboot能够支持nor.nand 本节继续修改让uboot支持DM9000C网卡,便可以通过网络来传输文件 首先uboot已带有dm9000网卡的驱动,位于drivers/net/下的d ...

  10. Java坦克大战(三)

    关于这个坦克大战的项目是在学习Java基础的时候,拿来练习的最近看到这些代码,感觉很亲切,就把他们都复制下来,编辑成博客.回首看去,Java基础的学习确实应该建立在找项目练习上,这样才能将学到的基础知 ...