1. 程式人生 > >ionic+cordova混合開發app【二、建立專案】

ionic+cordova混合開發app【二、建立專案】

1、建立專案


1、cmd進入專案存放的位置
2、開啟ionic官網進入專案建立demo示例依照步驟執行命令列建立專案:
官網地址:http://ionicframework.com/docs//intro/tutorial/
ionic start 專案名稱 tabs
其中專案名稱表示你要給自己專案起的名字,tabs則是你的專案框架的樣式

3、執行到提示要載入npm資源要等待時直接ctrl+c鍵進行關閉
4、這個時候我們就會在我們的檔案路徑中看到一個demo的資料夾已經被建立成功。

3、visual studio 配置

1)visual studio外掛的安裝
開啟visual studio 我們通過visual studio開啟我們剛剛建立的demo資料夾
開啟資料夾後,我們選擇visual studio第四項擴充套件功能,
輸入ionic將所有ionic2相關的外掛點選安裝,


安裝typescript、eclipse keymap、js-css-html formatter等外掛
目前我安裝的外掛有:

2)安裝完外掛後、我們點選提示的重新載入選項,讓visual studio重新開啟,此時所有外掛已經可以正常使用。
 

3、專案資源的新增


外掛安裝完成後點選檢視,選擇整合終端

我們開啟整合終端後就可以在這裡輸入命令來載入專案資源。
1)輸入cnpm install

載入所有相關ionic資源
等待載入完成後,專案所需所有資源就載入完成了。

2)專案瀏覽
當載入完成後輸入ionic serve,專案自動在瀏覽器中執行

將瀏覽器放在手機模式下進行檢視即可看到現在專案的框架已經基本完成