`

IONIC笔记恶补(3)

 
阅读更多
从NULL开始IONIC之路.

   老一套,第一步当然是环境搭建.

   要装的必须软件一共三个.
  
  
软件主页
Node.jshttp://nodejs.org
Ionic Clihttp://ionicframework.com
Cordova http://cordova/apache.org


   这三个必备的东西都很熟悉,
   尤其是Node.js至关重要,否则Web技术何以应用于移动应用.
   Ionic CLI工具则能够帮助我们管理和预览应用.
  

安装完后,检查成功与否及版本信息.

查看nodeJs版本信息

node -v



命令安装Ionic CLI 及 Cordova

npm install -g cordova ionic



查看cordova和ionic是否成功安装

cordova -v

ionic -v 



个人感觉这里会出现一些版本问题,先记录一下当时我所练习所使用的三个版本.

node    = v 4.4.4
cordova = 6.4.0
ionic   = 2.2.1



关于IONIC 及 cordova 的更新命令.

npm update -g ionic 

npm update -g cordova




环境配置其实到这儿就结束了.
-------------------------------------------------------------------------------


Ionic的Hello World项目步骤.

创建

ionic start chapter1

运行在浏览器


cd 项目根目录
ionic serve



给项目添加运行平台

ionic platform add ios

ionic platform add android

添加位置在 platform 目录下


在模拟器中运行

IN MAC OS

npm install -g ios-sim


ionic emulate ios -l -c

ionic emulate android -l -c

// -l -c  代表启用'热加载'
分享到:
评论

相关推荐

    ionic3开发笔记

    ### ionic3开发笔记知识点概览 #### 一、Ionic框架简介 Ionic是一个开源的前端框架,用于构建高质量的跨平台移动应用。它基于HTML5技术栈,支持使用Web技术如HTML、CSS和JavaScript来开发应用程序。Ionic 3是该...

    ionic sublime 2/3 提示插件 ionic-sublime-plugin

    3. **语法高亮**:插件对Ionic特有的语法进行高亮处理,使得代码结构更清晰,阅读体验更佳,有助于提高开发者的注意力和理解力。 4. **缩进和格式化**:根据Ionic的规范,插件可以自动调整代码的缩进和格式,保持...

    ionic3仿京东商城源码

    《基于Ionic3构建的仿京东商城源码解析》 在移动应用开发领域,Ionic框架以其强大的功能和跨平台特性受到了广泛关注。本篇文章将深入探讨一个使用Ionic3开发的仿京东商城源码,这对于想要学习和掌握Ionic3技术的...

    ionic3官网demo-super

    【标题】"Ionic3官网Demo-Super"是一个包含 Ionic3 框架官方示例项目的压缩包,旨在解决国内用户在下载 Ionic3 资源时可能出现的问题。这个压缩包提供了一个完整的、预下载的“super”项目,它是 Ionic3 官方教程中...

    ionic2和ionic3的详细区别比较

    ### ionic2与ionic3的关键区别 #### Angular版本的基础差异 理解ionic2与ionic3之间的差异,首先要明白这两个版本所基于的Angular版本不同。Ionic2建立于Angular2之上,而Ionic3则是基于Angular4构建的。Angular4...

    ionic3官网demo-tutorial

    总结来说,"ionic3官网demo-tutorial" 提供了一个学习和实践 Ionic 3 的良好资源。通过深入理解 Angular、Ionic 组件、导航、插件集成、状态管理以及性能优化等方面,开发者可以充分利用这个框架的优势,构建出高...

    ionic3 商城+后台demo

    本文将深入探讨一个名为"Ionic3 商城+后台demo"的项目,它巧妙地利用了Node.js作为后端,结合Ionic 3作为前端框架,构建了一个简单的移动端商城应用。这个应用不仅涵盖了基本的购物车功能,还实现了消息推送,从而为...

    Ionic3项目总结

    "Ionic3项目总结" Ionic3项目是一种使用Angular2框架和Ionic框架开发的移动应用程序。 Ionic3项目开发需要注意一些问题和解决方法,下面是其中的一些知识点: 1. 页面跳转 在Ionic3项目中,页面跳转可以通过...

    ionic3官网demo-blank

    本压缩包"ionic3官网demo-blank"提供了一个基础的Ionic 3项目模板,帮助开发者在遇到国内下载问题时快速入手。 在 Ionic 3 中,`blank`模板是最基本的应用结构,它包含了启动项目所需的所有核心文件和配置。当你...

    ionic3项目

    **Ionic 3 项目详解** 本文将深入探讨 Ionic 3 框架,以及如何在自己的项目中使用和运行一个基于 Ionic 3 的代码库。Ionic 是一款流行的开源框架,用于构建跨平台的移动应用程序,它基于 AngularJS 和 Apache ...

    ionic3-cordova-barcode-qrcode-scanner-master_ionic3_phone_

    标题 "ionic3-cordova-barcode-qrcode-scanner-master_ionic3_phone_" 提示我们这个项目是基于 Ionic 3 框架,用于开发能够在移动设备上原生运行的应用程序,特别是与条形码和二维码扫描相关的功能。描述 "ionic 3 ...

    ionic3官网demo-sidemenu

    【标题】"Ionic3官网Demo-Sidemenu"是一个基于 Ionic 框架的侧滑菜单示例项目,主要用于展示如何在 Ionic3 应用中实现侧滑菜单功能。这个项目是为了解决在国内下载 Ionic3 资源时可能遇到的网络问题,提供了一个已经...

    ionic小笔记.txt

    ionic自己整理的一些笔记,非常适合于刚入坑的小白,此文章是在开发项目中所得,希望可以帮助各位

    IonicLab 安装包 ionic开发工具

    3. **运行安装程序**:找到下载的`IonicLabSetup.exe`,双击启动安装向导。按照屏幕提示,选择合适的安装位置、语言设置等,并阅读并接受许可协议。 4. **安装过程**:等待安装程序完成所有步骤。在此期间,安装...

    ionic3入门级demo

    本篇文章将围绕“ionic3入门级demo”进行深入解析,帮助初学者快速掌握Ionic 3的基本概念和应用。 首先,我们需要理解Ionic 3的核心组件。这些组件包括但不限于:导航(Navigation)、页面(Pages)、服务...

    ionic3详细使用教程.zip

    ionic3详细使用教程.zip ionic3插件 ionic3遇到的问题 安装解压gradle的问题最后就报错 白屏 成功打出了第一个debug包后,竟然发现run不成功 打包一直报错 真机调试 ionic3环境变量 prod时间过长 生成发布apk 优化...

    ionic实战二十二中实现m3u8播放js文件

    总的来说,通过结合Ionic的响应式移动应用开发能力和HLS.js库,我们可以构建一个功能完善的M3U8流媒体播放器,覆盖多种设备和浏览器环境。记得在实际项目中进行充分的测试和优化,以确保流媒体内容在各种条件下的...

    ionic3开发指南

    ionic3的教学资源,我在chat上买的。 介绍移动开发中的一个重要框架——基于 Apache Cordova 的混合移动应用开发方案 Ionic。 Ionic 3.9.2 版本,以一个实例为主线,贯穿 Ionic 项目开发的全过程。从本地开发环境...

    ionic2 new demo

    3. **UI组件**: - **下拉框(Dropdown)**:`Ionic2`提供了`ion-select`组件来实现下拉框功能。它可以绑定到数据源,用户可以选择其中的一项,同时提供回调函数处理用户的选中事件。 - **输入框(Input)**:`ion...

Global site tag (gtag.js) - Google Analytics