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 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
javascript 闭包
Sep 15 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
js实现楼层导航功能
Feb 23 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
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 MemCached高级缓存配置图文教程
2010/08/05 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
Javascript实现的分页函数
2007/02/07 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
python中有关时间日期格式转换问题
2019/12/25 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
拓展培训心得体会
2014/01/04 职场文书
生产部管理制度
2014/01/31 职场文书
会计工作决心书
2014/03/11 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
销售团队口号大全
2014/06/06 职场文书
企业文化口号
2014/06/12 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
Python加密与解密模块hashlib与hmac
2022/06/05 Python