使用ember-cli腳手架快速構建項目

步驟：

1. 安裝Ember。
2. 創建一個新應用程序。
3. 定義路由。
4. 編寫一個UI組件。
5. 構建您的應用程序以部署到生產環境。

安裝Ember

您可以使用npm（Node.js包管理器，你需要安裝node.js）使用單個命令來安裝Ember。在終端中輸入以下內容：

ember new ember-quickstart

創建一個新應用程序

一旦你通過npm安裝了Ember CLI，你將可以ember在你的終端中訪問一個新的命令。您可以使用該ember new命令來創建一個新的應用程序：

ember new ember-quickstart

這一個命令將創建一個新的目錄，ember-quickstart並在其中創建一個新的Ember應用程序。您的應用程序將包括：

• 一個開發服務器ember server。
• handlebar模板編譯。
• JavaScript和CSS壓縮包。
• 通過Babel的ES2015功能(ES6)。

通過提供您需要的所有功能，您可以在集成軟件包中構建適用於生產環境的Web應用程序，Ember使輕松啟動新項目成為可能。

啟動項目

在終端中鍵入cd進入應用程序目錄ember-quickstart並鍵入以下命令來啟動開發服務器：

cd ember-quickstart
ember serve

（要隨時停止服務器，請在終端中鍵入Ctrl-C。）

在您選擇的瀏覽器中打開http://localhost:4200。你將看到一個Ember歡迎頁面，您剛剛創建並引導了您的第一個Ember應用程序。

我們將開始編輯application模板改變頁面中的內容：<h1>PeopleTracker</h1>。

app/templates/application.hbs
1 2 3	<h1>PeopleTracker</h1> {{outlet}}

定義路由

讓我們構建一個顯示列表的應用頁面，要做到這一點就是創建一條路由進行切換。

Ember帶有可以自動執行常見任務的樣板代碼的生成器。要生成路由，請在項目文件目錄ember-quickstart中的新終端窗口中輸入：

ember generate route scientists

該命令創造了：

1. 用戶訪問時要顯示的模板/scientists.hbs。
2. 一個Route是獲取由模板中使用的模型對象。
3. 應用程序路由器中的條目（位於app/router.js）。
4. 此路線的單元測試。

打開新創建的模板app/templates/scientists.hbs並添加以下HTML：

app/templates/scientists.hbs
1	<h2>List of Scientists</h2>

在你的瀏覽器中打開http://localhost:4200/scientists。你應該看到scientists.hbs模板中的<h2>List of Scientists</h2>就在application.hbs模板內容<h1>PeopleTracker</h1>的下面：

{{outlet}}

創建一個UI組件

隨着應用程序（頁面路由）的增長，您會注意到您在多個頁面之間共享UI元素，或在同一頁面上多次使用它們。Ember可以輕松將您的模板重構為可重用組件。

我們來創建一個people-list可以在多個頁面重復使用的組件來顯示人員列表。輸入以下內容以創建新組件：

ember generate component people-list

 然后將scientists模板復制並粘貼到people-list組件的模板中並進行編輯，如下所示：

app/templates/components/people-list.hbs
1 2 3 4 5 6 7	<h2>{{title}}</h2> <ul> {{#each people as |person|}} <li>{{person}}</li> {{/each}} </ul>

 

app/templates/scientists.hbs
1 2 3 4 5 6 7 8	<h2>List of Scientists</h2> <ul> {{#each model as |scientist|}} <li>{{scientist}}</li> {{/each}} </ul> {{people-list title="List of Scientists" people=model}}

點擊事件

到目前為止，您的應用程序正在列出數據，但用戶無法與信息交互。在Web應用程序中，您經常希望監聽點擊或懸停等用戶事件。

Ember使這很容易做到，你只需要在組件中添加一個action事件：

app/components/people-list.js
1 2 3 4 5 6 7 8 9	import Component from '@ember/component'; export default Component.extend({ actions: { showPerson(person) { alert(person); } } });

打包項目

我們已經編寫了我們的應用程序並驗證了它在開發中的作用，現在是時候打包部署給我們的用戶直接使用了。

使用build命令打包構成應用程序的所有資產分類：JavaScript，模板，CSS，Web字體，圖像等：

ember build --env production

 詳情可參考官方網站：https://guides.emberjs.com/v3.0.0/getting-started/quick-start/