手摸手帶你入門ionic3(三)：新建專案

JerryMissTom發表於2018-04-24

Note: 編輯器使用VS Code，可以通過檢視->整合終端開啟編輯器內的終端環境，執行 ionic 命令。

新建專案

開啟mac OS的終端，輸入：

ionic start awesomeProject
複製程式碼

awesomeProject 表示專案的名稱，可自定義，接著會出現以下模板選項，可以通過上下箭頭選擇新建的專案。

? What starter would you like to use: (Use arrow keys)
❯ tabs ............... ionic-angular A starting project with a simple tabbed intrface
  blank .............. ionic-angular A blank starter project
  sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
  super .............. ionic-angular A starting project complete with pre-built pages,providers and best practices for Ionic development.
  conference ......... ionic-angular A project that demonstrates a realworld application
  tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
  aws ................ ionic-angular AWS Mobile Hub Starter
複製程式碼

解釋一下，tabs是類似微信這樣底部包含Tab的模板，blank是隻含有一個介面的模板，sidemenu是類似QQ具有滑動側邊欄的模板，super 是ionic專案組提供的展示了ionic開發最佳實踐的模板，對ionic開發流程瞭解之後可以參考這個例子。conference 是ionic專案組提供的另一個展示ionic框架及元件使用例子的模板。tutorial是一個簡單的包含sidemenu，list，頁面跳轉等功能的小專案模板。

通過enter鍵確定選擇的模板，然後會自動從 GitHub 上下載模板和通過 npm install 載入依賴包，載入完畢後會詢問：

? Connect this app to the Ionic Dashboard?
複製程式碼

輸入n。點選enter鍵，出現以下內容，代表新建專案完畢。

? Connect this app to the Ionic Dashboard? No
> git add -A
> git commit -m "Initial commit" --no-gpg-sign

Next Steps:
Go to your newly created project: cd ./awesomeProject
複製程式碼

Note: 以後講解的程式碼都是在此專案中新增，之後不再贅述。

檔案說明

使用VS Code開啟剛才的專案awesomeProject，左側的資源管理器可以看到初始專案所有的檔案，每個檔案的作用我已經在之前的一篇部落格中做了解釋，具體參見 ionic V3.10 新建空白專案中檔案的簡單介紹，請務必把這篇部落格對照新建的專案的目錄看一遍。

專案啟動與除錯

在專案內部開啟 VS Code 內的終端，輸入：

ionic serve
複製程式碼

會構建專案，完成後自動開啟預設瀏覽器，我建議將預設瀏覽器設定成Chrome。假如沒有自動開啟，自己在瀏覽器輸入localhost:8100。開啟Chrome瀏覽器的開發者工具，選擇手機和平板模式，可以看到執行效果。

開啟 src/pages/home/home.html，將Ionic Blank兩個單詞替換成首頁，儲存修改，專案會自動構建，瀏覽器自動重新整理，可以看到最新效果。如下圖： default

假如自動重新整理的時候報下面的錯：

events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at exports._errnoException (util.js:1022:11)
    at TCP.onread (net.js:610:25)
複製程式碼

可以參見我在SF上的回答：ionic serve 報錯

後記

本人在寫一個ionic入門的教學手冊 ionic3-handbook，還有一個基於真實專案的ionic專案HW-basic，感興趣的可以看一下。

相關文章