系列文章

实战使用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 项目的更多相关文章

  1. 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  2. 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  3. 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  4. 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  5. 实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  6. [Android教程] Cordova开发App入门（一）创建android项目

    前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...

  7. Android开发2——创建测试项目

    一.创建普通Android项目   二.在AndroidManifest.xml添加两个配置 <?xml version="1.0" encoding="utf-8 ...

  8. 7.MVC框架开发（创建层级项目）

    在一个项目比较大的时候,就会有多个层级项目 1)在项目中选定项目右建新建区域(新的层级项目),项目->右键->添加->区域,构成了一套独立的MVC的目录,这个目录包括Views,Co ...

  9. Java生鲜电商平台-App系统架构开发与设计

    Java生鲜电商平台-App系统架构开发与设计 说明:阅读此文,你可以学习到以下的技术分享 1.Java生鲜电商平台-App架构设计经验谈:接口的设计2.Java生鲜电商平台-App架构设计经验谈:技 ...

随机推荐

  1. Highchart使用json格式数据lineDemo

    <html> <head> <title>Highcharts Example</title> <script type="text/j ...

  2. .net 发展史

    2002年年初 -Visual Studio 2002 & .Net Framework 1.0 2003年春天 -Visual Studio 2003 & .Net Framewor ...

  3. SpringMVC 的RequestMapping

    Spring MVC之@RequestMapping 详解 2013-10-13 23:39 150698人阅读 评论(6) 收藏 举报  分类: Java 精华文章(161)    目录(?)[+] ...

  4. response.setHeader()的用法

    一秒刷新页面一次 response.setHeader("refresh","1"); 二秒跳到其他页面 response.setHeader("re ...

  5. command not found,系统很多命令都用不了 ,修改环境变量

    bash: ***: command not found,系统很多命令都用不了,均提示没有此命令. 突然之间linux很多命令都用不了,均提示没有此命令. 这应该是系统环境变量出现了问题导致的. 解决 ...

  6. 更改 Skype for Business Online 的 Sip 地址以匹配UPN

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  7. angular中的自定义过滤器

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  8. Thinkphp内置截取字符串函数

    Thinkphp内置了一个可以媲美smarty的模板引擎,给我们带来了很大的方便.调用函数也一样,可以和smarty一样调用自己需要的函数,而官方也内置了一些常用的函数供大家调用. 比如今天我们说的截 ...

  9. NSIS（001）检测和结束进程是否运行？

    配合插件:killer.dll 导入DLL:ReserveFile "${NSISDIR}\Plugins\killer.dll" 使用方法: ;可以检测和结束32位程序进程和64 ...

  10. mono for android 各版本下载地址

    window下 在XamarinStudio 检查更新,会在这个目录下生成LOG和下载文件,所以可以从里面复制出来,查看真实下载地址 C:\Users\用户名\AppData\Local\Xamari ...