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不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
js格式化时间小结
Nov 03 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 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 curl_init函数用法
2014/01/31 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
pywinauto自动化操作记事本
2019/08/26 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
学习经验交流会主持词
2014/04/01 职场文书
学生操行评语大全
2014/04/24 职场文书
欢度春节标语
2014/07/01 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2019秋季运动会口号
2019/06/25 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书