Ionic开发项目
hybrid app是移动开发代替原生开发完成app应用项目的一种方案,Ionic是hybrid app开发的一种选择。对ionic有兴趣可以去网上找相应的基础知识来学习了解,因为Ionic是基于AngularJS框架开发的,所以在使用Ionic之前需要对angularjs有一定的了解。在这里说一下建立ionic项目的过程。
1.环境准备:
(1)nodejs安装
菜鸟教程网有nodejs的简单介绍和环境安装。安装完后,打开cmd控制台输入图中指令,显示相应的版本号说明安装好了。
(新版的NodeJS已经集成了npm,所以npm和nodejs环境一般是一起安装完成)

(2)cnpm安装(npm命令有时下载很慢,这是个很折腾得事,所以可以用cnpm来执行相关命令,npm可用情况下可以不用cnpm),cnpm使用的是淘宝网的镜像http://npm.taobao.org,可以通过以下命令全局安装:
npm install cnpm -g --registry=https://registry.npm.taobao.org
执行完后,键入cnpm -v命令,显示以下信息说明安装成功

(3)安装ionic和cordova
npm install -g cordova ionic
安装完后,输入下图指令,显示相应版本号说明安装成功:

2.建立项目工程
Ionic官网提供了三个项目模板blank、tabs和sideMenu ,参阅:http://ionicframework.com/getting-started/ ,我们使用下面指令建立一个空模板:
ionic start myIonic blank
其中myIonic为我们的项目名称
执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹,这个文件夹就是Ionic项目的所在目录了。
目录下有以下文件:
hooks //google之后这个目录应该是在编译cordova时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中
plugins //cordova插件的目录,插件的安装下一节详述
scss //scss文件,发布时编译这个目录下的文件输出到www的css目录中
www //我们的开发目录,页面、样式、脚本和图片都放在这个目录下
--css
--img
--js
--lib
--index.html
bower.json //bower配置文件
config.xml //Ionic的配置文件 ⱃ可以配置app的id,名称、描述起始页和一起其他配置
gulpfile.js //gulp构建工具的执行文件,在这个文件中创建任务实现编译scss,css、js优化等
ionic.project //Ionic的项目文件可以配置Ionic命令中livereload的监控文件
package.json //npm配置文件
至此我们就建立了一个ionic项目,下一章说下怎么编译打包开发完的ionic项目。
Ionic开发项目的更多相关文章
- [ionic开源项目教程] - 手把手教你使用移动跨平台开发框架Ionic开发一个新闻阅读APP
前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结.实战开发中遇到的各种问题的解决方案,也都将毫无保留的分享给大家. 关注订阅号:TongeBlog ,查看移动端跨平台 ...
- Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面
此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...
- Ionic开发实战
转自:http://blog.csdn.net/i348018533/article/details/47258449/ 折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此 ...
- Ionic 开发环境搭建
android sdk环境搭建并非易事,本人经过无数失败,才使用以下方式成功 配置Ionic 开发环境 1.下载JDK并配置Java运行环境 http://www.oracle.com/technet ...
- [ionic开源项目教程] - 第14讲 ionic解决跨域问题
[ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...
- [ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要)
[ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要) [效果图] 注意 今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...
- [ionic开源项目教程] - 第5讲 如何在项目中使用全局配置
第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...
- VS2015+AngularJS+Ionic开发
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
随机推荐
- List的定制排序 包括使用lambda表达式来实现的方法
1.先实现Comparator的接口 重写compare方法 根据比较大小来返回数值: 比如:(Integer o1 - Integer o2); return 1 表示o1>o2; re ...
- 基于libcurl实现REST风格http/https的get和post
c/c++开发中经常要用到http/https协议,直接使用socket工作量很大,要是使用socket实现https,那更不可思议,开源的c/c++的http客户端框架,libcurl是首选,而且也 ...
- 剑指offer(11-20)编程题
二进制中1的个数 数值的整数次方 调整数组顺序使奇数位于偶数前面 链表中倒数第k个结点 反转链表 合并两个排序的链表 树的子结构 二叉树的镜像 顺时针打印矩阵 包含min函数的栈 11.输入一个整数, ...
- Java将Excel的列数以字母表示的字符串转换成数字表示
我们知道,在 Excel 中,行数用数字表示,而列数是用字母表示的(如下图所示),有时候需要把它转换成数字来使用,或者把数字转换成字母.(例如使用POI操作Excel) 下面是转换代码,用来进行字母和 ...
- Android 直接通过JNI访问驱动
package com.yang.jniaccesshardware; import android.os.Bundle; import android.support.v7.app.AppCompa ...
- MySQL 数据类型总结及选取准则
整数 整数有 TINYINT, SMALLINT, MEDIUMINT, INT 和 BIGINT 类型. 占用 8 , 16 24, ...
- docker离线安装 启动报错Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xe" for details.
安装报错的提示:systemctl status docker.service 好吧,原来是缺少库文件.验证一下想法吧,yum -y install libseccomp 成功后,再启动docker发 ...
- jvm 内存机制
jvm 的内存包括stack ,Heap,NonHeap,在此重点说明Heap,NonHeap. Heap叫堆内存,它用于存放类实例和数组信息.NonHeap叫非堆内存,用于存放类,方法等可反射的对象 ...
- String拾遗
简介: String作为日常最常用的类,还是有必要对其中的细节做一些了解的,这篇就结合源码来看看这个常用的类. 一. 总述 类图如下: 从图中可以看到String是实现了 java.io.Serial ...
- UOJ#414. 【APIO2018】新家
传送门 首先二分答案 \(mid\),问题变成求区间 \([l-mid,r+mid]\) 在该年份的不同类型个数为 \(k\) 关于年份的限制可以离线下来 现在的问题就是区间数颜色,一个套路就是维护每 ...