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. Socket缓冲区探讨,是否有拆包的方式?

    Socket缓冲区探讨 本文主要探讨java网络套接字传输模型,并对如何将NIO应用于服务端,提高服务端的运行能力和降低服务负载. 1.1 socket套接字缓冲区 Java提供了便捷的网络编程模式, ...

  2. CoreText 简单 使用

    - (void)drawRect:(CGRect)rect { NSString *longText = @"CoreText"; /* ... */ NSRange rang = ...

  3. 再探Delphi2010 Class的构造和析构顺序

    发了上一篇博客.盒子上有朋友认为Class的构造和析构延迟加载.是在Unit的初始化后调用的Class的构造.在Unit的反初始化前调用的Class的析构函数. 为了证明一下我又做了个试验 unit ...

  4. elk 分布式部署

    这个logstash 读取日志 是增量的 还是怎么读的? 定时每秒读增量 机器配置: elasticsearch-192.168.32.80 elasticsearch-192.168.32.81 e ...

  5. Unix Shells: Bash, Fish, Ksh, Tcsh, Zsh

    Hyperpolyglot Unix Shells: Bash, Fish, Ksh, Tcsh, Zsh grammar | quoting and escaping | charactersvar ...

  6. 第七届河南省赛A.物资调度(dfs)

    10401: A.物资调度 Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 95  Solved: 54 [Submit][Status][Web Bo ...

  7. 解决word转pdf后图片失真

    碰到问题: 将word转pdf后图片出现失真 问题分析: 上述问题必定跟图片类型和所用软件有关,现将不同图片在不同软件下的失真情况汇总,见表1 问题解决:迫不得已,不要使用截图:若必需要用,则word ...

  8. Jquery filter()方法简介

    利用filter函数可以从wrapper set中过滤符合条件的dom元素. 如下图html代码,假如我们要获取类名为filter的<a>标签,用filter方法可以很轻松的获得. < ...

  9. MVC过滤器基本使用

        Action过滤器 /// <summary> /// 执行代码前执行 /// </summary> /// <param name="filterCo ...

  10. Sql Server 2008/2005 数据库还原出现 3154错误

    在Sql Server 2008/2005 数据库还原出现 3154错误 解决方法1:不要在数据库名字上点右键选择还原,而要是在根目录“数据库”三个字上点右键选择还原,然后再选择数据库,问题便可以解决 ...