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. C# 实现拨号重连

    先断开网络连接 /// <summary> /// 断开网络连接 /// </summary> public static void Logout() { ReadOnlyCo ...

  2. CSS 常用技巧

    概述 相信大家在写css属性的时候,会遇到一些问题,比如说:垂直对齐,垂直居中,背景渐变动画,表格宽度自适应,模糊文本,样式重置,清除浮动,通用媒体查询,自定义选择文本,强制出现滚动条,固定头部和页脚 ...

  3. Intellij-插件安装-JRebel热部署插件安装

    环境介绍: Win7.JDK1.8.maven+jetty插件.SpringMVC.Intellij IDEA 2018.1.2 安装插件: 在线安装: Settings --> Plugins ...

  4. 从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件

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

  5. Java 8 新特性-菜鸟教程 (5) -Java 8 Stream

    Java 8 Stream Java 8 API添加了一个新的抽象称为流Stream,可以让你以一种声明的方式处理数据. Stream 使用一种类似用 SQL 语句从数据库查询数据的直观方式来提供一种 ...

  6. 深入学习python解析并读取PDF文件内容的方法

    这篇文章主要学习了python解析并读取PDF文件内容的方法,包括对学习库的应用,python2.7和python3.6中python解析PDF文件内容库的更新,包括对pdfminer库的详细解释和应 ...

  7. freemarker中使用<@spring.*>标签实现国际化

    freemarker实现国际化使用自定义指令<@spring>实现,通过@符号可以看出是自定义的指令,在哪里定义的呢? 路径如下:org/springframework/spring-we ...

  8. springboot aop 自定义注解方式实现完善日志记录(完整源码)

    版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 一:功能简介 本文主要记录如何使用aop切面的方式来实现日志记录功能. 主要记录的信息有: 操作人,方法名,参数,运行时间,操作类型 ...

  9. Bootstrap-table 使用总结

    一.什么是Bootstrap-table? 在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这 ...

  10. C++ QT中自定义控件的简单创建

    为了给控件添加自定义的方法以及重绘控件,我们需要自定义控件来达到自己希望的结果,网上的自定义控件文章比较少,并且过程比较粗略. 此教程以中文版的QT Creator进行介绍 首先我们创建一个新的项目, ...