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. C/C++中使用的正则表达式库

    正则表达式 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 正则引擎主要可以分 ...

  2. Python3.5创建虚拟环境

    为每个程序单独创建虚拟环境可以保证程序只能访问虚拟环境中的包,保持全局解释器的干净整洁,使其只作为创建(更多)虚拟环境的源. windows下创建虚拟环境 Python3.5自带venv,只需执行py ...

  3. 字符串-06. IP地址转换

    /* * Main.c * D6-字符串-06. IP地址转换 * Created on: 2014年8月19日 *******测试通过******** *转载:http://blog.csdn.ne ...

  4. GridView分页功能的实现

    当GridView中显示的记录很多的时候,可以通过GridView的分页功能来分页显示这些记录.如果GridView是直接绑定数据库,则很简单:将"启动分页"打勾即可. 如果是用代 ...

  5. 阿里云ECS每天一件事D8:nginx1.7整合php5.4

    nginx本身的并不能解析php或者jsp,要转发给后端的php或者tomcat以及其他类似的应用程序服务器来提供服务. 首先我需要完成的配置是实现与php的整合,典型的配置信息如下: server ...

  6. 普通IT和文艺IT工程师的区别

    在一个UITableView的editing设置的方法实现过程中,我想到两种写法,顺便想了一下两种方法的区别.觉得这时一个普通IT工程师和NB工程师的区别一个有趣的印记. 您通常时怎么去实现的呢? - ...

  7. 使用LAMP创建基于wordpress的个从博客站点

    參考: http://blog.csdn.net/ck_boss/article/details/27866117 一.mysql配置 1.安装mysql yum install mysql-serv ...

  8. CodeForces 160D - Distance in Tree 树型DP

    题目给了512MB的空间....用dp[k][i]代表以k为起点...往下面走(走直的不打岔)i步能有多少方案....在更新dp[k][i]过程中同时统计答案.. Program: #include& ...

  9. AngularJs 简单入门

    1.AngularJs 是什么以及应用程序组成的三部分 AngularJS是一个开发动态Web应用的框架.它让你可以使用HTML作为模板语言并且可以通过扩展的HTML语法来使应用组件更加清晰和简洁.它 ...

  10. Asp.Net MVC4.0 官方教程 入门指南之五--控制器访问模型数据

    Asp.Net MVC4.0 官方教程 入门指南之五--控制器访问模型数据 在这一节中,你将新创建一个新的 MoviesController类,并编写代码,实现获取影片数据和使用视图模板在浏览器中展现 ...