实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目
系列文章
实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求
实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目
实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构
实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能
实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端
Ionic是什么? Ionic是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。
Ionic 在发布了1.0版本以后,被越来越多的关注和支持,社区也十分的活跃。本文将继续上篇,使用Ionic 框架来开发应用。
1. 首先安装NodeJs:https://nodejs.org/ 在NodeJs 网站上找到自己平台的安装包,执行安装即可。
2. 安装 Ionic:http://www.ionicframework.com/getting-started/ 执行命令。
npm install -g cordova ionic |
在Mac下安装的时候,可能会出现没有权限的问题。提升权限执行 sudo 即可:
sudo npm install -g cordova ionic |
Ionic 有三种默认项目模板:
i). blank –> 空工程模板,
ii). tabs -> 分页Tabs工程模板
iii). sidemenu -> 左边菜单工程模板
3. 使用 ionic start DeliveryApp blank 创建这个 App应用,DeliveryApp 是咱们这个实例的项目名称。
ionic start DeliveryApp blank |
4. 运行 ionic serve 看一下在网页中的模拟效果。
ionic serve |
5. 给这个应用添加发布平台,这里添加了 android 平台和 ios 平台。
cordova platform add android |
cordova emulate android |
cordova platform add ios |
ionic emulate ios |
到这里 ionic 就搭建完成了。 下一步下载 WebStorm,使用WebStorm作为开发的IDE吧。
6. WebStorm 开发环境
WebStorm下载地址:https://www.jetbrains.com/webstorm/ 下载并安装 WebStorm 安装完成后,使用 WebStorm 打开文件夹 DeliverApp。
截止到现在基于 ionic 的工程搭建好了,开发需要使用的 WebStorm 弄好了。下篇我们可以开始按照 Axure 里的需求开发每个页面了。(本文最终完成的工程代码会放在 github上)
实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目的更多相关文章
- 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- [Android教程] Cordova开发App入门(一)创建android项目
前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...
- Android开发2——创建测试项目
一.创建普通Android项目 二.在AndroidManifest.xml添加两个配置 <?xml version="1.0" encoding="utf-8 ...
- 7.MVC框架开发(创建层级项目)
在一个项目比较大的时候,就会有多个层级项目 1)在项目中选定项目右建新建区域(新的层级项目),项目->右键->添加->区域,构成了一套独立的MVC的目录,这个目录包括Views,Co ...
- Java生鲜电商平台-App系统架构开发与设计
Java生鲜电商平台-App系统架构开发与设计 说明:阅读此文,你可以学习到以下的技术分享 1.Java生鲜电商平台-App架构设计经验谈:接口的设计2.Java生鲜电商平台-App架构设计经验谈:技 ...
随机推荐
- SqlBulkCopy 从bcp客户端收到一个对 colid 1 无效的列长度。
出现这个错误,大家都知道是因为字段长度超出了,但是这里需要注意的是,colid 1指的是数据库表的第1列,而不是C#中DataTable的第1列. 比如C#中DataTable的列顺序为{" ...
- getElementsByTagName获得的不是数组的问题!
getElementsByTag() returns a NodeList instead of an Array. You can convert a NodeList to an Array bu ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- android 应用笔记
android 应用笔记 android 应用笔记 小书匠 Android 综合教程 Android常用技巧 安卓系统架构 安卓源码开发 安卓驱动 Linux内核 安卓应用开发 Java 教程 tic ...
- kernel 对浮点的支持
http://blog.chinaunix.net/uid-22545494-id-316735.html 作者: Sam(甄峰) sam_code@hotmail.com 一:早期ARM上的浮点模 ...
- mybatis框架中分页的实现
2.分页的实现? 分页的时候考虑的问题: 分页的大小,分页的索引. 比如:分页的大小为10,分页的起始索引为1(索引从1开始) 第一页:1到10. 起始行号: (页的索引-1)*分页大小+1 结 ...
- error while performing database login with the xxx driver
在MyEclipse的安装路径下D:\Program Files\MyEclipse 6.0\eclipse下面找到eclipse.ini文件,用记事本打开 eclipse.ini文件 -showsp ...
- 换行(\r)和回车(\n)
主要摘录自2篇blog: http://www.cnblogs.com/clarkchen/archive/2011/06/02/2068609.html http://www.360doc.com/ ...
- spring官网改版后,如何下载jar包
http://repo.springsource.org/libs-release-local/org/springframework 通过以上地址,可树型查看所有发布的包 问题是,官网页面上为何找不 ...
- vs2010编辑器中找不到System.Web.Extensions.dll
vs2010编辑器中想添加System.Web.Extensions.dll引用,却发现引用不了: 排除办法: 1.找到自己VS2010中System.Web.Extensions.dll的所在位置, ...