手摸手帶你入門ionic3(三)：新建項目

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兩個單詞替換成首頁，保存修改，項目會自動構建，瀏覽器自動刷新，能夠看到最新效果。以下圖：

假如自動刷新的時候報下面的錯：

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，感興趣的能夠看一下。