接著我們來試著建立一個測試 App
## create mysidemenu based on sidemenu project $ ionic start mysidemenu sidemenu ## go to mysidemenu folder $ cd mysidemenu ## list files $ ls # on mac $ dir # on windows ## open mysidemenu folder, take a look at the folder structure $ open . # on mac $ explorer . # on windows ## start running my app ## run this command in mysidemenu folder $ ionic serve ## (and choose 'localhost') ## Then, navigate your browser to http://localhost:8100 ## At this moment, you may want to install Chrome if you don't have one. ## https://www.google.com/chrome/browser/desktop/index.html這樣,我們就從 sidemenu 這個樣板建立了一個 mysidemenu 的 App,接著你就可以打開瀏覽器來測試看看,在 Chrome 裡面,你可以使用 Command + Option + i 來開啟開發人員工具(Windows 則使用 F12),在 Network 頁籤你可以看到載入訊息,在 Console 頁籤裡你可以看到錯誤訊息(如果有的話),並且你可以用 Command + Shift + m 來模擬手機螢幕,在這裡你可能會需要重新整理頁面來套用適當的版面。
如果你還沒有一個很好的程式編輯器,我們可以推薦幾個適合入門又強大的編輯器給你
1. Sublime Text
http://www.sublimetext.com/2
2. Atom
https://atom.io/
3. Visual Code
https://www.visualstudio.com/zh-tw/products/code-vs.aspx
前往下一章- 製作一個靜態頁面
沒有留言:
張貼留言