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 09 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
node使用promise替代回调函数
May 07 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
JS实现放大镜效果
Sep 21 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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在线打包程序源码
2008/07/27 PHP
php htmlspecialchars加强版
2010/02/16 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
vue实例的选项总结
2020/06/09 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Python实现随机选择元素功能
2017/09/14 Python
django 信号调度机制详解
2019/07/19 Python
Python如何使用函数做字典的值
2019/11/30 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
Python 中Operator模块的使用
2021/01/30 Python
高中军训感想300字
2014/03/04 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
实训报告范文大全
2014/11/04 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
个人催款函范文
2015/06/24 职场文书
导游词之吉林花园山
2019/10/17 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Python基础之字符串格式化详解
2021/04/21 Python
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python