步驟： 安裝Ember 您可以使用npm（Node.js包管理器，你需要安裝node.js）使用單個命令來安裝Ember。在終端中輸入以下內容： 創建一個新應用程式 一旦你通過npm安裝了Ember CLI，你將可以ember在你的終端中訪問一個新的命令。您可以使用該ember new命令來創建一個 ...
步驟：
- 安裝Ember。
- 創建一個新應用程式。
- 定義路由。
- 編寫一個UI組件。
- 構建您的應用程式以部署到生產環境。
安裝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
該命令創造了：
- 用戶訪問時要顯示的模板
/scientists.hbs。 - 一個
Route是獲取由模板中使用的模型對象。 - 應用程式路由器中的條目（位於
app/router.js）。 - 此路線的單元測試。
打開新創建的模板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/
