Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置-程序员宅基地

原文发表于我的技术博客
本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许差别请查阅相关文档即可。
原文发表于我的技术博客

1. Ionic 环境的安装

1.1 Node.js 与 npm 介绍

Node.js 与 npm 是 Ionic 环境的基础,这里我们做一下简要介绍。
Node.js 是基于 Chrome's V8 JavaScript engine 构建的一个JavaScript runtime (一般翻译为 JavaScript 运行时),特点是事件驱动、非阻塞等。
npm 是 Node.js 中的 JavaScript 包管理。目前已经是最大的开源组件库,使用起来非常方便,也非常值得学习。
以上两个组件,只需要安装 Node.js 即可。

  • Mac 系统中,下载 pkg 安装;
  • Windows 系统中,下载对应的 msi 安装,注意 32 位和 64 位版本的区别。

下载地址:https://nodejs.org/en/download/
安装后,可以通过 node -v 查看当前版本,确认是否安装成功或者查看当前的 Node.js 版本。

截图

Ionic 推荐安装 Node.js 的版本为 v4.0+,即高于 4.0 的版本即可。

1.2 Ionic 的安装

这里使用最新的 v2.0 beta 版本进行学习,而且 2.0 版本对于 1.0 版本的所有功能都进行了兼容,所以项目如果从 1.0 转成 2.0,也是可以平滑过渡的。
安装 Ionic,使用以下命令即可。

$ npm install -g ionic@beta

如果需要安装 Ionic 1.0 版本,使用如下命令即可。

$ npm install -g ionic

2.初始化空项目并体验

安装了 Ionic 后,使用如下命令初始化一个空项目,名称为 ionicdemo。

$ ionic start ionicdemo --v2

ionic start 命令默认采用 tabs template 作为初始化项目的模板,如果需要其他的模板,那么在项目名称后面添加上对应的模板名称即可,如要使用 tutorial template 作为模板,那么命令如下。

$ ionic start ionicdemo tutorial --v2

其他的模板列表参见这里

注意这里的 --v2 参数,因为 ionic 命令是和 1.0 版本公用的,所以添加 --v2 参数明确了使用2.0 版本去初始化项目。
此过程主要安装了必要的 npm modules,并且安装依赖的 Cordova 组件。
这里还有一个技巧,就是如果想使用 TypeScript,那么只要在命令后面添加 --ts 参数即可。

进入项目目录。

$ cd ionicdemo

运行,在浏览器中查看效果。

$ ionic serve

截图

当需要在浏览器中模拟 iPhone 下的 UI 展示,需要选择对应的模拟设备,刷新即可。

截图

这里的原理是 Chrome 修改了对应的 User-Agent,Ionic 根据此进行了对应的 UI 呈现。
在控制台中可以看到。

截图

使用浏览器进行开发调试是非常方便的方案,不需要频繁连接真机,并且可以方便直观地借助 Chrome 控制台进行样式、JavaScript 等调试。
如果需要在模拟器上运行,那么 iOS 设备执行下面的命令即可。

$ ionic run ios

如果是 Android 设备,那么执行下面的命令。

$ ionic run android

这样就可以在对应的模拟器上运行了,至于详细的 iOS/Android 的环境配置,我们在下面的章节将有详细地讲解。

转载于:https://www.cnblogs.com/parry/p/7062298.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30794851/article/details/99848365

智能推荐

r读取shape文件可视化_【一篇足够】数据可视化高阶入门【代码实战】-程序员宅基地

文章浏览阅读1.1k次。​以R可视化为桥梁经常有对比R,Python和Julia之间的讨论,似乎R语言在这三者之中是最为逊色的,实则不可一概而论。R语言在常规数据分析的场景下,如数据读入,预处理,整理,以及单机可视化方面表现出的优势,无论从用户体验,还是代码流畅度,令另两种语言略逊一筹。本文将从统计学中最基本的密度曲线的绘制,来串讲一下题目中所涉及的R语言可视化中三个强大的可视化包的用法,以及之间的联系。以此为基础,进阶..._r语言读取线shape

时间复杂度与空间复杂度_空间陡度-程序员宅基地

文章浏览阅读242次。文章目录一、时间复杂度(1)高低阶项比较![在这里插入图片描述](https://img-blog.csdnimg.cn/20191024165632569.png)(2)定义:(3)例子(4)计算方法二、空间复杂度一、时间复杂度(1)高低阶项比较O(1)也被称为常数阶(2)定义:时间复杂度可以表示某个算法的运行时间的趋势与问题规模的关系,大致地度量算法效率的好坏。(3)例子(4)..._空间陡度

RFC3986之URL编码与解码、AFPercentEscapedStringFromString_rfc3986编码-程序员宅基地

文章浏览阅读1.9w次,点赞10次,收藏11次。通常如果一样东西需要编码,说明这样东西并不适合传输。原因多种多样,如Size过大,包含隐私数据,对于Url来说,之所以要进行编码,是因为Url中有些字符会引起歧义。例如Url参数字符串中使用key=value键值对这样的形式来传参,键值对之间以&符号分隔,如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&,那么势必会造成接收Url的服务器解析错误,因此必须将引起歧义_rfc3986编码

java 代码读取pom_java – 从Maven POM文件读取属性文件-程序员宅基地

文章浏览阅读1.3k次。Maven允许您在项目的POM中定义属性。您可以使用类似于以下内容的POM文件来执行此操作:...http://localhost:8080/manager/html......${server.url}tomcat...您可以避免在属性标签中指定属性,并将命令行中的值传递为:mvn -Dserver.url=http://localhost:8080/manager/html some_mave..._代码获取pom文件值

Pandas之Series+DataFrame-程序员宅基地

文章浏览阅读129次。Series是带有标签的一维数组,可以保存任何数据类型(整数,字符串,浮点数,python对象)index查看series索引,values查看series值series相比于ndarray,是一个自带索引index的数组--> 一维数组 + 对应索引series和dict相比,series更像是一个有顺序的字典创建方法1.由字典创建,字典的key就是index,valu..._输出含series内容的dataframe行

又一篇“java学习路线图”-程序员宅基地

文章浏览阅读76次。转自:http://hi.baidu.com/clebean/blog/item/cdab34da86055ed7b7fd482d.html 仅供参考!在开始之前有必要再讨论一下J2ME,J2SE,J2EE这些概念。J2ME,The Micro Edition of the Java 2 Platform。主要用于嵌入式Java,如手机,PDA等等。J2SE,Java 2 Platform,Sta...

随便推点

Unity3D GUISkin Font(ttf) 导致的:“Font size and style overrides are only supported for dynamic fonts.-程序员宅基地

文章浏览阅读6.1k次。编译 运行会有大量Warning:Font size and style overrides are only supported for dynamic fonts.UnityEngine.GUI:Button(Rect, String)解决办法:- Import a TTF font file in Unity.- Set the Character Set to_font size and style overrides are only supported for dynamic fonts.

css3伪元素::_CSS伪类:基于元素索引的样式-程序员宅基地

文章浏览阅读631次。css3伪元素::The following is an extract from our book, CSS Master, written by Tiffany B. Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here. 以下是Tiffany B. Brown所著《 CSS Mast..._伪元素的的内容索引

VueJs开发入门-程序员宅基地

文章浏览阅读2.6k次。之所以选择vuejs,除了vuejs比较轻量外,同时还有vuejs的语法结构,非常简单,明了,很容易学习。vuejs主要负责数据渲染的部分,和一些事件,在项目中还可以完美插入Jepto框架。vuejs 2.0版本公司开发项目为公众号商城。用vue来写数据渲染方面和开发公共组件十分方便。 使用npm安装: npm install vue 当然你也可以在gith_vuejs开发

分布式关系型数据库学习记录_分布式关系型数据库是相对什么而言-程序员宅基地

文章浏览阅读523次。分布式关系型数据库的核心原理是数据水平拆分,将数据库数据按特定拆分规则分散到多个MySQL数据库上。这些MySQL数据库可分布于多台机器乃至跨机房分布,对外服务(增删改查)尽可能保证达到如同单MySQL数据库所能提供的数据库访问体验。数据拆分后,在MySQL上物理存在的数据库称为分库,物理存在的表称为分表(每个分表数据是完整数据的一部分)。分布式关系型数据库通过在不同MySQL实例上挪动分库,实..._分布式关系型数据库是相对什么而言

ADODB 调用存储过程-程序员宅基地

文章浏览阅读470次。追加参数法调用存储过程  追加参数通过CreateParameter方法,用来指定属性创建新的Parameter对象。具体语法如下:Set parameter = command.CreateParameter (Name, Type, Direction, Size, Value)   ·Name 可选,字符串,代表 Parameter 对象名称。  ·Type 可选..._adodb 执行存储过程传参数

create tablespace 与 heap_insert 函数-程序员宅基地

文章浏览阅读130次。先说 heap_insert 函数:/* * heap_insert - insert tuple into a heap * * The new tuple is stamped with current transaction ID and the specified * command ID. * * If t...