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 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
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
杏林同学录(七)
2006/10/09 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
解析php中memcache的应用
2013/06/18 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
python实现文本文件合并
2015/12/29 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
师范生个人推荐信
2013/11/29 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
护理学专业求职信
2014/06/29 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
检讨书怎么写?
2019/06/21 职场文书