ionic3学习之环境搭建

ionic 简介

ionic 是一款基于Angular、Cordova 的强大的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的官网。

课前知识

前端基本知识（HTML5、JavaScript、CSS）
了解 Typescript
了解 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

图示：

注：

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

补充：

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

1.使用命令行 super：

ionic start ionicDemo-super super

对应的界面为：

2.使用命令行 conference ：

ionic start ionicDemo-conference conference

对应的界面

3.使用命令行 tutorial

ionic start ionicDemo-tutorial tutorial