iconic 安装和使用
ionic 安装
本站实例采用了ionic v1.0.1 版本,下载地址为:ionic-v1.0.1.zip。
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 应用。
实例
<h1 class="title">Hello World!</h1>
</ion-header-bar>
<ion-content>
<p>我的第一个 ionic 应用。</p>
</ion-content>
尝试一下 »
点击 "尝试一下" 按钮查看在线实例。
本教程着重讲解 ionic 框架的应用,大部分实例在浏览器中运行 ,移动设备上运行可以在接下来的命令行安装教程中详细了解。
注意:在移动应用如 phonegap 中我们只需将对应的 js 和 css 文件加入到资源库中即可。
命令行安装
首先您需要安装 Node.js,我们在接下来的安装中需要使用到其 NPM 工具,更多 NPM 介绍可以查看我们的NPM 使用介绍。
然后通过命令行工具安装最新版本的 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
如果出现"ios-sim was not found."错误,可以执行以下命令:
npm install -g ios-sim
如果一切正常会弹出模拟器,界面如下所示:
Ionic Lab
Ionic Lab 是桌面版的开发环境,如果你不喜欢使用命令行操作,Ionic Lab 将会满足你的需求。
Ionic Lab 为开发者提供了一个更简单的方法来开始,编译,运行,和模拟运行Ionic的应用程序。
Ionic Lab 支持的平台有:Window、Mac OS X、Linux,下载地址为:http://lab.ionic.io/,下载后直接安装即可。整个操作界面如下所示:
通过以上界面你可以完成以下操作:
- 创建应用
- 预览应用
- 编译应用
- 运行应用
- 上传应用
- 运行日志查看……
推荐使用Sublime Text作为 Ionic 项目的编辑器,我们可以通过 Ionic Lab 直接在Sublime Text 上打开项目,如下图:
Gif 操作演示
iconic 安装和使用相关推荐
- Centos5.6 VNC安装配置【无错版】
不严格按本步骤就会出现VNC桌面花屏,就是桌面分离为一层一层的... ---------------------------------------- 先装X window http://blog.c ...
- oracle enterprise linux 5.7,Red Hat Enterprise Linux 5.7 安装Oracle数据库
环境:Red Hat Enterprise Linux 5.7 数据库:Oracle 11g 1.Linux操作系统安装组建选择: GNOME Desktop Environment Editors ...
- Linux (CentOS)安装VNC+XFCE可视化桌面环境 附安装FireFox浏览器
CentOS6.5 一.检测系统XFCE版本 yum grouplist 二.安装XFCE yum groupinstall Xfce 在安装过程中会出现"Is this ok [y/n]& ...
- deepin安装kde桌面 无法进入_通过远程桌面vnc安装不上,通过远程桌面vnc安装不上无法使用是因为什么?怎么解决...
通过远程桌面vnc安装不上,好不容易下载了一款远程桌面vnc,为什么安装不上呢?安装配置好了以后还会出现无法使用的情况.接下来小编就给大家解惑吧. 安装配置好以后,却无法使用,主要遇到两个问题: 1. ...
- 【主机】vnc 介绍以及安装时注意的问题
Linux下Vnc远程桌面Server配置教程http://www.aiezu.com/Article/Linux_Vnc_Server_conf.aspx用VNC实现远程桌面共享(支持Windows ...
- unity桌面设置vnc_Ubuntu 16.04下安装VNC和Unity桌面系统
本站之前已经跟大家分享了不少关于VNC以及桌面系统传送),关于为什么Linux要安装桌面,这个见仁见智,对于我而言,一个用途是是挂Vegax赚点零花钱(用Firefox的插件),之前的教程,所安装的桌 ...
- linux安装tightvnc_tightvnc安装配置,在Linux系统中进行tightvnc安装配置
尝试在CentOS上安装一个VNC Server.CentOS5 已经自带了VNC,默认也已经安装了,只要配置一下就可以了(如果没有安装,可以:yum install vnc vncserver安装) ...
- RHEL 6 下VNC Server 的安装配置
发下牢骚: 在安装rhel 6 64Bit的系统时我有安装远程桌面,本远程桌面为系统自带的,可以通过VNC的客户端访问,只不过和VNCServer的访问方式有点不一样,rhel6自带的远程桌面访问方式 ...
- AWS Ubuntu安装可视化操作桌面和VS Code,Code Server
文章目录 安装桌面GUI 需要 安装过程 远程连接服务器桌面 安装vscode 安装Code-server 安装桌面GUI 需要 Ubuntu,sudo权限 安装过程 # 首先连接到服务器,教程见 h ...
最新文章
- 注意!Linux glibc再曝漏洞,可导致Linux软件劫持
- 【Java Web前端开发】BootStrap入门
- windows 10 python哪个版本的好-windows10 conda python多版本切换
- 高可靠芯片搭配视觉演算法,影像式ADAS满足车规要求
- akka es/cqrs_在Akka中实现主从/网格计算模式
- 设置广告 php,设置ecshop广告位
- libjpeg-turbo编译流程
- 威富通 全付通 中信 支付 PHP 一些问题总结(签名机制,sign:This field is required,no start line ,回调机制,漏单)
- Unity 材质之_stander shader
- 一步一步理解欧拉公式
- Mac通过转接口用千兆网线连接电信宽带
- 互联网时代没有囊括进来的流量,在产业互联网时代全部都被囊括进来
- 流利阅读day1 Dysmorphia
- 完美解决select2插件提示信息是英文的问题
- python随机生成英文字符串_如何用Python语言生成随机字符串 | 学步园
- php基础教程推荐,php基础教程-绝对推荐
- 持续集成之Jenkins+Gitlab实现持续集成
- 轻松搞定分组报表中的各种排序
- Jenkins 也宣布弃用 JDK 8,你还在用JDK8吗
- 大数据是如何发展起来的?