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 相关文章推荐
jQuery validate验证插件使用详解
May 11 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
js实现简单的计算器功能
Jan 16 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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的正则处理函数总结分析
2008/06/20 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Python发送邮件实现基础解析
2020/08/14 Python
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
党的群众路线教育实践方案
2014/05/11 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
幼师中班个人总结
2015/02/12 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书