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

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

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

环境迁移

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

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

为什么会出现如上图所示的情况。在官博相关资料中有介绍,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功能已被移植到一个插件中,当检测到没有该插件时,会提示用户安装。

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

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

再说起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 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模板,可以较快的掌握基础语法和了解基础的项目架构。

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

(0)

相关推荐

  • VS2017 Cordova Ionic2 移动开发环境搭建教程

    分享VS2017 Cordova Ionic2 移动开发环境搭建教程 1. 文档概述 本文档用于说明Visual Studio 2017下使用 Ionic 2进行跨平台开发的运行环境配置. 2. 安装环境 Windows10 3. 安装Visual Studio 2017community 3.1 官方下载地址:https://www.visualstudio.com/downloads/ 3.2 运行安装程序,需选中使用JavaScript的移动开发,如下图所示. 3.3 进行VS2017扩展

  • Ionic2开发环境搭建教程

    关于网络环境:ionic开发环境不需要FQ.我这里没有设置FQ,亲测可行.但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败. 建议大家在搭建开发环境的时候,不要参考百度出来的各种博客,太零碎,重要的是时间久,也不一定写的对.强烈建议参考官网引导教程.http://ionicframework.com/gettingstarted/ 1.下载安装Node.js.官网地址:https://nodejs.org/en/我安装的是v7.10.0版本. 2.安装完成后通过命令行 n

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

    本文介绍了基于ionic3.4.0的项目搭建,分享给大家,具体如下: 在写这篇文章的时候,ionic版本已经更新到3.4.0.手头上有一大堆ionic1.x版本的项目,也在这个基础上开发了许多第三方的插件.实在是按捺不住迭代重构的想法,终于开始了3.x的升级.文中的内容都是在实践的过程编写的,注意请不要着急升级版本. 环境迁移 先看下升级后最新的环境输出信息 全局升级了Cordova和Ionic的版本,分别是7.0.1和3.4.0.输出ionic info 打印出最新的环境配置信息.这里要特殊指

  • Quarkus篇入门创建项目搭建debug环境

    目录 前言 搭建Quarkus项目 纯手工方式 官网装配器方式 IDEA方式 编写第一个Quarkus接口 启动你的应用并调试 前言 在学习一个新的框架技术前,肯定要先来一套hello word,搭建基本的运行环境和调试环境. 先来创建一个Quarkus的应用 搭建Quarkus项目 下面介绍三种创建Quarkus项目的方式 纯手工方式 1.创建maven工程,这个不多赘述,是个java程序员都会的 2.添加Quarkus依赖,下面贴出基本的依赖 <properties> <quarku

  • vue3.0 项目搭建和使用流程

    最近在重构一个老项目,领导要求使用新的技术栈.好吧,是时候秀一波我新学的vue3.0了. 不多bb,开始我的表演...(以下只是我自己个人的理解和使用习惯,仅供参考哦) 一:项目搭建 1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建.(有兴趣可以研究一下vite,还是很香的) 2. 项目生成:iTerm下: vue create myproject 之后根据自己的要求选择不同的配置 选择我们需要的3.x 之后按照要求配置一下router,已经pack.json ... 然后n

  • vue3.0 项目搭建和使用流程

    目录 一:项目搭建 二: 目录结构 三: Composition Api 四: 基本使用: 最近在重构一个老项目,领导要求使用新的技术栈.好吧,是时候秀一波我新学的vue3.0了. 不多bb,开始我的表演...(以下只是我自己个人的理解和使用习惯,仅供参考哦) 一:项目搭建 1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建.(有兴趣可以研究一下vite,还是很香的) 2. 项目生成:iTerm下: vue create myproject 之后根据自己的要求选择不同的配置 选

  • 使用webpack搭建vue环境的教程详解

    1.安装node.js,在官网下载,直接下一步,完成.nodejs里默认包含npm环境.国内安装包的速度太慢,建议使用cnpm淘宝镜像. npm install -g cnpm --registry=https://registry.npm.taobao.org 2.vue-cli构建SPA应用 安装vue:npm install vue -g 安装vue-cli:npm install -g vue-cli 使用webpack构建一个简单项目:vue init webpack-simple d

  • Pycharm中配置远程Docker运行环境的教程图解

    捣鼓了一天一直报错:Error running 'mypython': Can't run remote python interpreter: the working directory 'C:\Users\admin\Desktop\dc' is invalid, it needs to be an absolute path 首先咱们得搞清楚,pycharm连接docker的原理 Step 1: 打开pycharm连接docker ,记得打开远程2375端口 Step 2:连接远程dock

  • Virtualenv 搭建 Py项目运行环境的教程详解

    小朋友你可能有很多问号~,上一小节不是已经一顿操作猛如虎搭建好 Python + PyCharm 可用开发环境了吗?为什么这节又来个项目运行环境?作者你是不是想搞事情... Virtualenv 简介 淡定,事情是这样(试图狡辩): 首先 「 Virtualenv 」 是用于创建隔离的Python环境的工具. 那为什么需要隔离 不同项目的 Python 环境呢 由于 Python 被称为胶水语言,用途相当广泛.导致它的类库也五花八门,比如: web开发,你需要安装 Flask,Djanjo...

  • 快速上手基于Anaconda搭建Django环境的教程

    目录 一.介绍 二.django环境安装 1.创建虚拟环境Django 2.激活沙箱环境 3.安装Django 三.pycharm的安装与配置 四.创建简单的Django示例 一.介绍 Django特点:具有完整的封装,开发者可以高效率的开发项目,Django将大部分的功能进行了封装,开发者只需要调用即可,如此,大大的缩短了开发的时间,同时也因为太多封装导致开发灵活度和项目的运行效率不足.通常在工作当中,开发者可以使用Django快速的搭建项目,然后基于项目进行个别部分的效率优化. 二.djan

  • Nginx+SSL+Node.js运行环境配置教程

    Nginx是一款高性能的HTTP服务器,同时也是一款高效的反向代理服务器.不像传统的服务器,Nginx是基于事件驱动的异步架构,内存占用少但是性能很好.如果你的Web应用是基于Node.js的,那么建议你考虑使用Nginx来做反向代理,因为Nginx可以非常高效地提供静态文件服务.本文的主要内容是在不同的操作系统下配置Nginx和SSL,并且搭建一个Node.js运行环境. 安装Nginx 假设你已经在服务器上安装了Node.js,下面我们来安装Nginx. 在Mac系统上安装Nginx 利用c

  • CentOS使用本地yum源搭建LAMP环境图文教程

    本文实例讲述了CentOS使用本地yum源搭建LAMP环境.分享给大家供大家参考,具体如下: [准备工作] 配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables 如图,添加下面两条: -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT #允许80端口通过防火墙 -A INPUT -m state --state NEW -m tcp -p tcp --dport 3306 -j

随机推荐