ionic3学习之环境搭建

ionic 简介

ionic 是一款基于AngularCordova 的强大的HTML5 移动应用开发框架, 可以快速创建一个跨平台的移动应用。可以快速开发移动App移动端 WEB 页面微信公众平台应用,混合app web 页面。ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic 特点

  • 1.ionic 基于Angular语法,简单易学(如果是学习过Angular的话)
  • 2.ionic 是一个轻量级框架。
  • 3.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
  • 4.ionic 专注原生,让你看不出混合应用和原生的区别
  • 5.ionic 提供了强大的命令行工具

ionic 和 Cordova(phonegap) 、Angular 关系

ionic = Cordova + Angular + ionic CSS
ionic 是完全基于谷歌的 Angular 框架,在 Angular 基础上面做了一些封装,让我们可以更快速和容易的开发移动的项目。ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用 JavaScript 调用 Native 功能,ionic 自己也封装了一套漂亮的CSS UI 库。

ionic3 简介

ionic 基于 AngularJS(这里是指的是 angularjs 1) 开发。angularjs 1 是基于 ES5 的标准开发,但是现在推出了 ES6,ES7都已经发布。angularjs 在 2 的版本上是使用 Typescript 开发。ionic2 就跟着 angular2推出的。ionic3 是 Angular4.0 推出之后的跟进版本,变化幅度不大。详细的可以去看下 ionic 的官网以及 angular的官网。

课前知识

如果不熟悉可以去看下

安装 ionic

1. 需要安装 nodejs 以及 npm
Node官网的地址:https://nodejs.org/en

2.安装 ionic(全局安装)
npm install -g cordova ionic

3.查看下版本
ionic -version

4.创建应用
// 在要创建项目的目录下使用命令

// 创建一个带有标签页的应用,应用名字为 myApp(默认创建的就是tabs)
// ionic start myApp blank 是创建一个空白的项目
// ionic start myApp sidemenu 是创建一个带有侧边滑动的菜单 
ionic start myApp tabs

5.运行项目
cd myApp
ionic serve

6.浏览器访问
localhost:8100

图示:

ionic3学习之环境搭建

注:

  • 关于安装 ionic 可以看下 ionic官网
  • 升级 ionic 的方法:
    npm install -g ionic@lastest

补充:

更新 ionic cli 之后在新建工程的时候有多个选项
ionic3学习之环境搭建
1.使用命令行 super:

ionic start ionicDemo-super super

对应的界面为:
ionic3学习之环境搭建

2.使用命令行 conference :

ionic start ionicDemo-conference conference

对应的界面
ionic3学习之环境搭建

3.使用命令行 tutorial

ionic start ionicDemo-tutorial tutorial

对应的界面
ionic3学习之环境搭建

相关推荐