1. 程式人生 > >搭建ionic專案環境並開始第一個demo

搭建ionic專案環境並開始第一個demo

一、安裝NodeJs(安裝nodejs是為了方便使用命令列直接下載安裝我們需要的環境)

NodeJs官網:https://nodejs.org/en/

安裝穩定版即可,安裝步驟跟安裝普通軟體一樣,下一步,下一步,最後完成就ok了。


安裝結束,在 cmd控制檯輸入

node  -v  

若出現版本號,即為安裝成功。


二、安裝ionic、cordova環境,在cmd視窗執行以下命令

nmp install  -g cordova ionic


視電腦效能跟網速不同,一般5分鐘左右安裝完畢,安裝完畢後,在cmd視窗輸入

Ionic -v  回車執行,出現版本號即為安裝成功,同樣輸入cordova -v

出現版本號即為安裝成功 



三、執行以下命令,從github下載一個模板專案到本地

在cmd視窗切換路徑到你想要建立專案的路徑下,然後執行以下命令

ionic start myapp sidemenu

然後等待幾分鐘之後,就得到了一個從github上下載下來的模板專案,“ionic start myapp sidemenu” myapp是我們建立的專案名,sidemenu是模板型別(還可以是tabs,blank),sidemenu是帶有側滑選單的模板,blank是空白專案,tabs是帶有選項卡的模板專案

四、執行剛才建立的專案

首先進入我們的專案myapp


然後輸入命令

ionic serve


此時會自動開啟瀏覽器執行剛才建立的專案(建議將chrome瀏覽器設定為預設瀏覽器,因為chrome瀏覽器有手機終端模擬器,方便開發)


至此,ionic專案環境搭建完畢,並建立了第一個demo,下節將介紹開發工具,及專案結構