ionic 3.0+ 项目搭建运行环境的教程


Posted in Javascript onAugust 09, 2017

本文介绍了基于ionic3.4.0的项目搭建,分享给大家,具体如下:

在写这篇文章的时候,ionic版本已经更新到3.4.0。手头上有一大堆ionic1.x版本的项目,也在这个基础上开发了许多第三方的插件。实在是按捺不住迭代重构的想法,终于开始了3.x的升级。文中的内容都是在实践的过程编写的,注意请不要着急升级版本。

环境迁移

先看下升级后最新的环境输出信息

ionic 3.0+ 项目搭建运行环境的教程

全局升级了Cordova和Ionic的版本,分别是7.0.1和3.4.0。输出ionic info 打印出最新的环境配置信息。这里要特殊指出的是Ionic CLI。Ionic和Ionic CLI是不一样的东西。Ionic CLI是基于nodeJS的工具脚手架,开发Ionic应用程序过程中使用的主要工具。更新了最新的Ionic版本后,该工具也随之升级。当我们用Ionic CLI提供的命令去运行打包项目时,显示如图示。

ionic 3.0+ 项目搭建运行环境的教程

为什么会出现如上图所示的情况。在官博相关资料中有介绍,Ionic团队为了提高其性能和用户体验,重写了CLI。更新后的其中一个变化就是和Cordova CLI交互相关的所有命令,都需要将cordova作为命令的一部分。以前我们是执行以下命令

ionic platform add android 
ionic run/build android

在v3 CLI命令则是

ionic cordova platform add android 
ionic cordova run/build android

第一次在项目中执行该命令,会弹出如下提示,是因为Ionic CLI的Cordova功能已被移植到一个插件中,当检测到没有该插件时,会提示用户安装。

ionic 3.0+ 项目搭建运行环境的教程

看下cli-plugin-cordova 安装前后的命令对比

ionic 3.0+ 项目搭建运行环境的教程

ionic 3.0+ 项目搭建运行环境的教程

现在,执行ionic cordova run/build android就可以进行调试打包了。再回到ionic 1.x项目的调试打包问题,不管新旧项目,第一次运行命令,也是会提示按照相应的插件,和v3略有不同。

ionic 3.0+ 项目搭建运行环境的教程

再说起cordova,其实以上命令也都是基于Cordova CLI,那么,如果用Cordova CLI提供的命令来打包,是不是也是可以执行。这当然可以,只是新的工具提供了更多的命令,比如ionic generate(简写: ionic g),可以更加高效的构建项目。拿官博提供的一个例子说下。

$ ionic g tabs
? What should the name be? myTab
? How many tabs? 4
? Name of this tab: home
? Name of this tab: maps
? Name of this tab: contacts
? Name of this tab: more
[OK] Generated a tabs named myTab!

再比如ionic g page myPage、ionic g provider MyData,都可以快速的为我们构建模块化、结构化的目录。工具的作用就是提高我们的开发效率,具体怎么使用,见仁见智了。如果习惯了依旧可以使用cordova,但为了往后面的版本靠拢,升级也无可厚非。

版本降级

说完环境迁移,说说版本回退的问题。在升级到3.4.0之前,因为有升级到2.x的经历,导致1.x项目也是无法正常运行打包,因此对版本进行了回退。而在升级到3.3的时候,折腾了半天也没发现命令重构成ionic cordova。所以把Ionic CLI降级回退到了2.x,这时候ionic start 都是1.x的版本,再通过ionic start xxx ?v2的方法去下载ionic框架在github最新的demo,这时候下载的就是最新的3.x版本。2.x->3.x只是版本号的迭代,所以执行?v2是会下载最新的demo源码。

npm uninstall -g ionic
npm cache clean
npm install -g ionic@2 
ionic start myProject blank

此时我的环境是这样子的

ionic 3.0+ 项目搭建运行环境的教程

可以看到Ionic CLI 的版本是2.x,而项目下载是最新3.x的源码,同样执行基于Ionic CLI 2.x版本的命令,都是可以正常运行打包任何项目的。通过这种办法,也是可以同时运行加载1.x到3.x的项目,至于使用哪种办法,各取所需吧。

学习使用官方Demo

官方在1.x的时候提供了blank/sidemenu/tabs 三种demo模板,开发时可以根据不同的需求学习或使用对应的模板。在3.x之后,新增了super和tutorial两种模板。

tabs : a simple 3 tab layout
sidemenu: a layout with a swipable menu on the side
blank: a bare starter with a single page
super: starter project with over 14 ready to use page designs
tutorial: a guided starter project

ionic start MyIonicProject tutorial

下载模板命令不变,如果没有指定模板,默认是tabs。在这里我推荐使用super模板,可以较快的掌握基础语法和了解基础的项目架构。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
初识Javascript小结
Jul 16 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
js微信分享实现代码
Oct 11 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
JS中forEach()、map()、every()、some()和filter()的用法
May 11 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
JavaScript实现的浏览器下载文件的方法
Aug 09 #Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 #Javascript
详解用node搭建简单的静态资源管理器
Aug 09 #Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 #Javascript
vue.js框架实现表单排序和分页效果
Aug 09 #Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 #Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
You might like
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
Vuex简单入门
2017/04/19 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
详解python调度框架APScheduler使用
2017/03/28 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
用python解压分析jar包实例
2020/01/16 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
法人授权委托书
2014/04/03 职场文书
小学课外活动总结
2014/07/09 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
Python 中random 库的详细使用
2021/06/03 Python
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android