Ionic快速安裝教程

Ionic 是目前最有潛力的一款 HTML5 手機應用開發框架。經過 SASS 構建應用程序，它 提供了不少 UI 組件來幫助開發者開發強大的應用。接下來小編給你們介紹如何安裝 Ionic 在本身的電腦上搭建一個簡單的小應用，感興趣的朋友一塊兒看看吧

今天就讓咱們學習一下如何安裝 Ionic 在本身的電腦上搭建一個簡單的小應用。不少的網站上面都會寫很複雜的安裝方法，其實剛開始學習ionic的初學者，特別是沒有不少編程經驗的小夥伴是否是會嚇跑了？感受那麼複雜須要安裝什麼node.js的環境啊、, 安裝最新版本的cordova啊… … 其實不須要那麼麻煩的。告訴你們我在作項目的時候怎麼使用ionic的吧。

第一種方法：直接引入使用

第一步 、首先下載Ionic

ionic 最新版本下載地址：http://ionicframework.com/docs/overview/#download。

下載後解壓壓縮包，包含如下目錄：

 

複製代碼代碼以下:

css/ => 樣式文件
fonts/ => 字體文件
js/ => Javascript文件
version.json => 版本更新說明

 

你也能夠在 Github 上下載如下資源文件：https://github.com/driftyco/ionic（在release 目錄中）。

第二步 、引入文件

接下來，咱們只須要在項目中引入以上目錄中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件便可建立 ionic 應用。

?

1 2 3 4 5 6

<ion-header-bar class= "bar-positive" > <h1 class= "title" >Hello World!</h1> </ion-header-bar> <ion-content> <p>個人第一個 ionic 應用。</p> </ion-content>

注意：在移動應用如 phonegap 中咱們只需將對應的 js 和 css 文件加入到資源庫中便可。

第二種方法：命令行安裝

首先您須要安裝 Node.js。而後經過命令行工具安裝最新版本的 cordova 和 ionic 。經過參考Android 和 iOS 官方文檔來安裝。

Window 和 Linux 上打開命令行工具執行如下命令：

 

複製代碼代碼以下:

$ npm install -g cordova ionic

 

Mac 系統上使用如下命令：

 

複製代碼代碼以下:

sudo npm install -g cordova ionic

 

提示: IOS須要在Mac Os X. 和Xcode環境下面安裝使用。

若是你已經安裝了以上環境，能夠執行如下命令來更新版本:

 

複製代碼代碼以下:

npm update -g cordova ionic

 

或

 

複製代碼代碼以下:

sudo npm update -g cordova ionic

 

建立應用

使用ionic官方提供的現成的應用程序模板，或一個空白的項目建立一個ionic應用：

 

複製代碼代碼以下:

$ ionic start myApp tabs

 

運行咱們剛纔建立的ionic項目

使用 ionic tool 建立，測試，運行你的apps(或者經過Cordova直接建立)。

建立android應用:

 

複製代碼代碼以下:

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

 

建立ios應用:

 

複製代碼代碼以下:

$ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios