1、简介ionic
ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。
 
2、安装ionic/Install Ionic
首先您需要安装 Node.js. 其次, 安装最新版本的cordova 和 ionic command-line tools. 通过参考Android 和 iOS 官方文档来安装.
提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用 (iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command sudo npm -g install ios-sim.)
$ npm install -g cordova ionic
 
cmd
node -v
(检查是否有node,-g表示全局安装,否则要配置环境变量。nodejs在官网下载推荐版recommended for most users)
npm install -g cordova ionic
(如已安装nodejs,可用npm安装cordova和ionic)
(链接不上会报错,重新下载即可,下载太慢可分2步npm install -g cordova 和 npm install -g ionic 下载)
 
 
3、通过Ionic创建一个项目
使用Ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个Ionic应用。( Create an Ionic project using one of our ready-made app templates, or a blank one to start fresh.)
 
创建一个目录,cmd cd命令找到目录,再输入ionic start myApp blank命令
myapp是项目名称,可以更改
blank是项目类型
回车后会从网上下载资源,然后会有一个选择y/n,要输入n
创建好的目录不要动
myapp文件夹中:Plugin中是用来操作底层api的插件;
scss是css扩展写法;
www是h5项目,ionic是已发布版本,
angular中是配套的1.5.3版,
bundle是所以js的整合串联,h5页面只引用bundle即可
 
 
4、运行Ionic项目
使用Ionic tool 创建 ,测试,运行你的apps(或者通过Cordova直接创建),如果要创建android应用,把右侧创建代码中的ios改为android ( Use the Ionic tool to build, test, and run your apps (or use Cordova directly). Make sure to substitute ios with android to build for Android.)
Then, try Ionic View to share your apps with testers and clients, or to easily test on new devices.
 
cmd cd找到项目文件myapp
-->ionic platform add ios 或 ionic platform add android
(添加ios、android平台,会下载资源,myapp下会创建platform文件夹--ios、android文件夹)
 
-->ionic build ios
( 如果是tabs 和 sidemenu 类型的ionic项目,ios要先装xcode; android 要先装 Android SDK)
 
-->ionic emulate ios
 

cordova安装--创建ionic项目的更多相关文章

  1. 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  2. ionic start 创建ionic项目报错,及解决过程

    问题描述: 前一次创建利用命令行创建ionic项目一次性成功,第二次没有运行: $ npm install -g ionic cordova 直接运行: ionic start ionicDemo 出 ...

  3. VUE 安装&创建一个项目

    1,安装node.js vue依赖nodejs,所以首先要安装node.js 然后打开cmd,输入命令, node -v.正常出现版本号,说明你已经安装成功了 下载地址:http://nodejs.c ...

  4. 在ubuntu上安装运行ionic项目

    1.安装nodejs.npm curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install - ...

  5. IntelliJ IDEA 2018.1.4 x64安装创建maven项目等

    Intellij IDEA 一:介绍 Jetbrains公司https://www.jetbrains.com/idea/ 1.1版本 Ultimate最终[收费] 网络,移动和企业开发 Web, m ...

  6. 如何离线创建Ionic/cordova项目

    在创建ionic项目的时候,需要联网下载许多东西,由于墙的缘故,我们在创建.添加android平台.编译过程中,失败的可能性非常高,为解决这个问题,我创建了一个空的Ionic1 tab项目,并完成了上 ...

  7. Ionic项目中使用极光推送

    Ionic项目中使用极光推送-android   对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...

  8. Ionic项目中使用极光推送-android

    对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...

  9. ionic项目编译打包(android平台)

    ionic项目相关开发工作完成之后(建立ionic工程项目可以参考上一篇文章ionic项目工程建立),就可以进行项目的编译打包apk应用包. 打包编译需要在平台环境下,这里只记录下android平台打 ...

随机推荐

  1. Easyui + jQuery表单提交 给 Controller patr1

    2014-11-15  总结上周在公司开发所用到的技术,由于是刚找的工作(一个大三实习生)+自己的技术菜,有很多地方都是怎么想就怎么实现的, 如果你有什么更好的解决方法,在看见这篇博客的时候,希望你能 ...

  2. TextView settextcolor 无效解决方案

    viHolder.order_item_tipcolor.setBackgroundColor(context .getResources().getColor(R.color.order_xixie ...

  3. jquery实现锚点动画效果

    锚点相信大家都使用过吧!点击后僵硬的切换是不是很不爽呢? 下面分享一个小技巧,根据锚点offset值来实现动画切换 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. poj 2155 matrix 二维线段树

    题目链接 区间翻转, 单点查询, 查询操作我真是不太明白...... #include <iostream> #include <vector> #include <cs ...

  5. table常用

    <style> table,table td { border: 1px solid #ccc; border-collapse:collapse; } </style> 注意 ...

  6. PCB打样镀层问题

    现在大部分pcb打样所用PCB板一般有锡板和金板之分(一般根据客户要求和产品特 性选择),那么它们有什么区别呢?现在我将他们的区别作比较如下: 1. 从成本方面来说,锡板价格低,金板价格高. 2. 从 ...

  7. smarty如何处理状态值的显示

    比如状态,有效或者无效.这个数据库中保存的是1或者2这样的字段. 显示在列表的时候不能是1或者2吧. 以前,我都是在后台foreach,处理的.感觉处理之后,前台就不灵活了.这个值就被替换成了文字. ...

  8. HDU 5877 Weak Pair(树状数组)

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5877 [题目大意] 给出一棵带权有根树,询问有几对存在祖先关系的点对满足权值相乘小于等于k. [题 ...

  9. HDU 1076 An Easy Task

    题解:枚举即可…… #include <cstdio> int main(){ int now,y,n,T,count; scanf("%d",&T); whi ...

  10. Noip2013调试技巧

    关于调试技巧,个人觉得还是很重要的,于是把自己之前写过的总结拿出来,修修补补再复习一下. F7 单步跟踪法 这是大家都最常用的调试方法,可以一步一步去跟踪程序的运行方向,以及各种变量的变化情况,当发现 ...