Ionic快速安装教程


Posted in Javascript onJune 03, 2016

今天就让我们学习一下如何安装 Ionic 在自己的电脑上搭建一个简单的小应用。很多的网站上面都会写很复杂的安装方法,其实刚开始学习ionic的初学者,特别是没有很多编程经验的小伙伴是不是会吓跑了?感觉那么复杂需要安装什么node.js的环境啊、, 安装最新版本的cordova啊… … 其实不需要那么麻烦的。告诉大家我在做项目的时候怎么使用ionic的吧。

第一种方法:直接引入使用

Ionic快速安装教程

第一步 、首先下载Ionic

ionic 最新版本下载地址:http://ionicframework.com/docs/overview/#download。

下载后解压压缩包,包含以下目录:

css/ => 样式文件

fonts/ => 字体文件

js/ => Javascript文件

version.json => 版本更新说明

你也可以在 Github 上下载以下资源文件:https://github.com/driftyco/ionic(在release 目录中)。

第二步 、引入文件

接下来,我们只需要在项目中引入以上目录中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可创建 ionic 应用。

<ion-header-bar class="bar-positive">
<h1 class="title">Hello World!</h1>
</ion-header-bar>
<ion-content>
<p>我的第一个 ionic 应用。</p>
</ion-content>

注意:在移动应用如 phonegap 中我们只需将对应的 js 和 css 文件加入到资源库中即可。

第二种方法:命令行安装

首先您需要安装 Node.js。然后通过命令行工具安装最新版本的 cordova 和 ionic 。通过参考Android 和 iOS 官方文档来安装。

Window 和 Linux 上打开命令行工具执行以下命令:

$ npm install -g cordova ionic

Mac 系统上使用以下命令:

sudo npm install -g cordova ionic

提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用。

如果你已经安装了以上环境,可以执行以下命令来更新版本:

npm update -g cordova ionic

sudo npm update -g cordova ionic

创建应用

使用ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个ionic应用:

$ ionic start myApp tabs

运行我们刚才创建的ionic项目

使用 ionic tool 创建,测试,运行你的apps(或者通过Cordova直接创建)。

创建android应用:

$ cd myApp

$ ionic platform add android

$ ionic build android

$ ionic emulate android

创建ios应用:

$ cd myApp

$ ionic platform add ios

$ ionic build ios

$ ionic emulate ios
Javascript 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
js 作用域和变量详解
Feb 16 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 #Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 #Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 #Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 #Javascript
深入理解JavaScript内置函数
Jun 03 #Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 #Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 #Javascript
You might like
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python 重命名轴索引的方法
2018/11/10 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Django后台admin的使用详解
2019/07/08 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python telnet登陆功能实现代码
2020/04/16 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
施工安全汇报材料
2014/08/17 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
个人催款函范文
2015/06/23 职场文书
导游词之天津盘山
2019/11/01 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python