Ionic快速安装教程
Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。通過 SASS 構(gòu)建應(yīng)用程序,它 提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。接下來小編給大家介紹如何安裝 Ionic 在自己的電腦上搭建一個簡單的小應(yīng)用,感興趣的朋友一起看看吧
今天就讓我們學(xué)習(xí)一下如何安裝 Ionic 在自己的電腦上搭建一個簡單的小應(yīng)用。很多的網(wǎng)站上面都會寫很復(fù)雜的安裝方法,其實(shí)剛開始學(xué)習(xí)ionic的初學(xué)者,特別是沒有很多編程經(jīng)驗(yàn)的小伙伴是不是會嚇跑了?感覺那么復(fù)雜需要安裝什么node.js的環(huán)境啊、, 安裝最新版本的cordova啊… … 其實(shí)不需要那么麻煩的。告訴大家我在做項(xiàng)目的時候怎么使用ionic的吧。
第一種方法:直接引入使用
第一步 、首先下載Ionic
ionic 最新版本下載地址:http://ionicframework.com/docs/overview/。
下載后解壓壓縮包,包含以下目錄:
復(fù)制代碼代碼如下:
css/ => 樣式文件
fonts/ => 字體文件
js/ => Javascript文件
version.json => 版本更新說明
你也可以在 Github 上下載以下資源文件:https://github.com/driftyco/ionic(在release 目錄中)。
第二步 、引入文件
接下來,我們只需要在項(xiàng)目中引入以上目錄中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可創(chuàng)建 ionic 應(yīng)用。
?
|
1 2 3 4 5 6 |
|
注意:在移動應(yīng)用如 phonegap 中我們只需將對應(yīng)的 js 和 css 文件加入到資源庫中即可。
第二種方法:命令行安裝
首先您需要安裝 Node.js。然后通過命令行工具安裝最新版本的 cordova 和 ionic 。通過參考Android 和 iOS 官方文檔來安裝。
Window 和 Linux 上打開命令行工具執(zhí)行以下命令:
復(fù)制代碼代碼如下:
$ npm install -g cordova ionic
Mac 系統(tǒng)上使用以下命令:
復(fù)制代碼代碼如下:
sudo npm install -g cordova ionic
提示: IOS需要在Mac Os X. 和Xcode環(huán)境下面安裝使用。
如果你已經(jīng)安裝了以上環(huán)境,可以執(zhí)行以下命令來更新版本:
復(fù)制代碼代碼如下:
npm update -g cordova ionic
或
復(fù)制代碼代碼如下:
sudo npm update -g cordova ionic
創(chuàng)建應(yīng)用
使用ionic官方提供的現(xiàn)成的應(yīng)用程序模板,或一個空白的項(xiàng)目創(chuàng)建一個ionic應(yīng)用:
復(fù)制代碼代碼如下:
$ ionic start myApp tabs
運(yùn)行我們剛才創(chuàng)建的ionic項(xiàng)目
使用 ionic tool 創(chuàng)建,測試,運(yùn)行你的apps(或者通過Cordova直接創(chuàng)建)。
創(chuàng)建android應(yīng)用:
復(fù)制代碼代碼如下:
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
創(chuàng)建ios應(yīng)用:
復(fù)制代碼代碼如下:
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
總結(jié)
以上是生活随笔為你收集整理的Ionic快速安装教程的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: flac文件提取专辑封面手记
- 下一篇: AssionShop开源B2C电子商务系