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

对应的界面