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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
JavaScript函数模式详解
Nov 07 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
layer实现弹出层自动调节位置
Sep 05 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生成百度sitemap站点地图类函数实例
2014/10/17 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
JS实现多选框的操作
2020/06/24 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python中itertools的用法详解
2020/02/07 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
婚前协议书
2014/04/15 职场文书
党员个人整改措施
2014/10/24 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
门面租赁合同范文
2019/08/06 职场文书
nginx共享内存的机制详解
2022/03/21 Servers
Java 多态分析
2022/04/26 Java/Android