使用ember-cli脚手架快速构建项目

使⽤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。

）
我们将开始编辑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>
{{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 9import Component from '@ember/component'; export default Component.extend({
actions: {
showPerson(person) {
alert(person);
}
}
});
打包项⽬
我们已经编写了我们的应⽤程序并验证了它在开发中的作⽤，现在是时候打包部署给我们的⽤户直接使⽤了。

使⽤build命令打包构成应⽤程序的所有资产分类：JavaScript，模板，CSS，Web字体，图像等：
ember build --env production。