步骤：
- 安装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/
原文地址：https://www.cnblogs.com/wheatCatcher/p/8480117.html