ionic3学习之环境搭建

ionic 简介

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

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/en2.安装 ionic（全局安装）
 npm install -g cordova ionic3.查看下版本
 ionic -version4.创建应用
 // 在要创建项目的目录下使用命令// 创建一个带有标签页的应用，应用名字为 myApp（默认创建的就是tabs）
 // ionic start myApp blank 是创建一个空白的项目
 // ionic start myApp sidemenu 是创建一个带有侧边滑动的菜单 
 ionic start myApp tabs5.运行项目
 cd myApp
 ionic serve6.浏览器访问
 localhost:8100

图示：

注：

补充

更新 ionic cli 之后在新建工程的时候有多个选项

1.使用命令行 super：

ionic start ionicDemo-super super

对应的界面为

2.使用命令行 conference ：

ionic start ionicDemo-conference conference 

对应的界面

3.使用命令行 tutorial

ionic start ionicDemo-tutorial tutorial

对应的界面