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的官網。

課前知識

• 前端基本知識（HTML五、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

對應的界面