快速入门

你可以使用 npm 通过一条命令全局安装 ember-cli，在终端输入以下内容：

npm install -g ember-cli

这将使 ember 脚本在你电脑上的任何地方都可用。如果你不想全局安装 ember-cli，你可以在需要时使用 npx ember-cli 来运行它。本指南的大多数地方都假设你已经全局安装了 ember-cli，所以如果你看到类似 ember new 的命令，请记住你随时可以用 npx ember-cli new 来代替。

没有 npm？点击此处学习如何安装 Node.js 和 npm。关于 Ember CLI 项目所需依赖的完整列表，请访问 Ember CLI 指南 - 安装。

一旦通过 npm 安装了 Ember CLI，你就可以在终端中使用 ember 命令了。你可以使用 ember new 命令来创建新应用。

ember new ember-quickstart --lang en --strict

这条命令将创建一个名为 ember-quickstart 的新目录，并在其中设置一个新的 Ember 应用。--lang en 选项将应用的默认语言设置为英语，以改善可访问性。你的应用开箱即包含：

• 开发服务器。
• 模板编译。
• JavaScript 和 CSS 压缩。
• 通过 Babel 实现的现代特性。

Ember 将构建生产级 Web 应用所需的一切集成在一个包中，使启动新项目变得非常容易。

让我们确保一切运行正常。使用 cd 进入 ember-quickstart 应用目录，并通过输入以下命令启动开发服务器：

cd ember-quickstart
npm start

几秒钟后，你应该会看到类似这样的输出：

> ember-quickstart@0.0.0 start
> vite

  VITE v6.3.6  ready in 1202 ms

  ➜  Local:   https://:4200/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

（若要随时停止服务器，请在终端中按 Ctrl-C。）

在浏览器中打开 https://:4200。你应该会看到一个 Ember 欢迎页面。

Zoey 说……

如果你在运行过程中遇到问题，其他 Ember 开发人员很乐意提供帮助！请访问 Ember 社区页面加入聊天群组或论坛。

恭喜！你刚刚创建并启动了你的第一个 Ember 应用。

首先，我们将编辑 application 模板。当用户加载应用时，该模板始终在屏幕上显示。在你的编辑器中，打开 app/templates/application.gjs 并将其修改为以下内容：

<template>
  <h1>PeopleTracker</h1>
  {{outlet}}
</template>

Vite 会检测到文件更改，并在后台自动为你重新加载页面。你会看到欢迎页面已被 "PeopleTracker" 替换。你还在该页面中添加了一个 {{outlet}}，这意味着任何路由都将渲染在该位置。

让我们构建一个展示科学家列表的应用。为此，第一步是创建一个路由。目前，你可以认为路由就是组成你应用的各个不同页面。

Ember 附带了生成器，可以自动处理常见任务的样板代码。要生成一个路由，请在 ember-quickstart 目录的一个新终端窗口中输入：

ember generate route scientists

你会看到如下输出：

installing route
  create app/routes/scientists.js
  create app/templates/scientists.gjs
updating router
  add route scientists
installing route-test
  create tests/unit/routes/scientists-test.js

这是 Ember 在告诉你它已经创建了：

1. 一个当用户访问 /scientists 时显示的模板。
2. 一个用于获取该模板所需模型的 Route 对象。
3. 应用路由器中的条目（位于 app/router.js 中）。
4. 该路由的单元测试。

打开新创建的模板 app/templates/scientists.gjs 并添加以下代码：

import { pageTitle } from 'ember-page-title';

<template>
  {{pageTitle "Scientists"}}
  <h2>List of Scientists</h2>
</template>

在浏览器中，打开 https://:4200/scientists。你应该能看到我们在 scientists.gjs 模板中放入的 <h2>，就在我们 application.gjs 模板中 <h1> 的下方。

由于 scientists 路由嵌套在 application 路由下，Ember 会将其实际内容渲染在 application 路由模板的 {{outlet}} 指令内。

现在我们已经有了渲染的 scientists 模板，让我们给它提供一些数据。我们通过为该路由指定一个模型来做到这一点，我们可以通过编辑 app/routes/scientists.js 来指定模型。

我们将使用生成器为我们创建的代码，并在 Route 中添加一个 model() 方法：

import Route from '@ember/routing/route';

export default class ScientistsRoute extends Route {
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
}

此代码示例使用了 JavaScript 的类特性。通过此最新 JavaScript 特性概述了解更多信息。

在路由的 model() 方法中，你可以返回任何你希望在模板中可用的数据。如果你需要异步获取数据，model() 方法支持任何使用 JavaScript Promise 的库。

现在让我们告诉 Ember 如何将该字符串数组转换为 HTML。打开 scientists 模板并添加以下代码来循环遍历数组并打印它：

import { pageTitle } from 'ember-page-title';

<template>
  {{pageTitle "Scientists"}}
  <h2>List of Scientists</h2>
  <ul>
    {{#each @model as |scientist|}}
      <li>{{scientist}}</li>
    {{/each}}
  </ul>
</template>

在这里，我们使用 each 辅助函数 (helper) 来循环遍历我们从 model() 钩子提供的数组中的每一项。Ember 将为数组中的每一项（在本例中为每位科学家）渲染一次 {{#each}}...{{/each}} 辅助函数中包含的块 (block)。当前正在渲染的项（科学家）将通过 each 辅助函数中的 as |scientist| 可用，存储在 scientist 变量中。

最终结果是，无序列表 <ul> 内会有对应数组中每位科学家的 <li> 元素。

随着应用的增长，你会注意到你会在多个页面之间共享 UI 元素，或者在同一页面上多次使用它们。Ember 使得将模板重构为可复用的组件变得非常容易。

让我们创建一个可以在多个地方使用的 PeopleList 组件，用来显示人员列表。

像往常一样，有一个生成器让这变得简单。通过输入以下命令创建一个新组件：

ember generate component people-list

你会看到如下输出：

installing component
  create app/components/people-list.gjs
installing component-test
  create tests/integration/components/people-list-test.gjs

这是 Ember 在告诉你它已经创建了：

1. 在 components 文件夹中创建一个 people-list 组件。
2. 一个用于测试组件的 people-list-test 集成测试文件。

将 scientists 模板的这一部分复制并粘贴到新创建的 PeopleList 组件中，并将其编辑为如下所示：

<template>
  <h2>{{@title}}</h2>

  <ul>
    {{#each @people as |person|}}
      <li>{{person}}</li>
    {{/each}}
  </ul>
</template>

注意，我们将标题从硬编码字符串（"List of Scientists"）更改为了 {{@title}}。@ 表示 @title 是一个将传递给组件的参数，这使得在我们要构建的应用的其他部分重用同一个组件变得更容易。

我们还将 scientist 重命名为更通用的 person，减少了组件与其使用位置的耦合。

保存此模板并切回 scientists 模板。

我们要告诉我们的组件：

1. 通过 @title 参数使用什么标题。
2. 通过 @people 参数使用什么人员数组。我们将提供该路由的 @model 作为人员列表。

我们需要对之前编写的代码进行一些更改。

在本教程的其余代码示例中，每当我们添加或删除代码时，我们都会显示一个 "diff"（差异）。需要删除的行前面有一个减号，需要添加的行前面有一个加号。如果你在阅读本指南时使用屏幕阅读器，我们建议使用 Firefox 和 NVDA 或 Safari 和 VoiceOver 以获得最佳体验。

让我们用新的组件化版本替换我们所有的旧代码：

import { pageTitle } from 'ember-page-title';
import PeopleList from '../components/people-list';

<template>
  {{pageTitle "Scientists"}}
  <h2>List of Scientists</h2>
  <ul>
    {{#each @model as |scientist|}}
      <li>{{scientist}}</li>
    {{/each}}
  </ul>
  <PeopleList
    @title="List of Scientists"
    @people={{@model}}
  />
</template>

回到你的浏览器，你应该会看到 UI 看起来完全相同。唯一的区别是，现在我们将列表组件化为一个更易于重用和维护的版本。

如果你创建一个显示不同人员列表的新路由，就能看到它的实际效果。作为额外练习（我们不会涵盖），你可以尝试创建一个显示著名程序员列表的 programmers 路由。如果你重用了 PeopleList 组件，你几乎不需要编写任何代码就可以完成。

到目前为止，我们的应用正在列出数据，但用户无法与这些信息进行交互。在 Web 应用中，我们通常需要响应用户的操作，如点击或悬停。Ember 让这一切变得简单。

首先，我们可以修改 PeopleList 组件以包含一个按钮：

<template>
  <h2>{{@title}}</h2>

  <ul>
    {{#each @people as |person|}}
      <li>
        <button type="button">{{person}}</button>
      </li>
    {{/each}}
  </ul>
</template>

现在我们有了一个按钮，我们需要将其连接起来，以便在用户点击它时执行某些操作。为简单起见，假设当按钮被点击时，我们想要显示一个包含该人姓名的 alert 对话框。

目前，我们的 PeopleList 组件纯粹是展示性的——它接收一些参数作为输入并使用模板进行渲染。为了给组件引入行为（在本例中为处理按钮点击），我们需要将一些 JavaScript 附加到组件上。

让我们使用 on 修饰符 (modifier) 来处理按钮上的点击事件：

import { on } from '@ember/modifier'

function showPerson(clickEvent) {
  alert(`You clicked on a button labeled ${clickEvent.target.innerHTML}`);
}

<template>
  <h2>{{@title}}</h2>

  <ul>
    {{#each @people as |person|}}
      <li>
        <button type="button" {{on "click" showPerson}}>{{person}}</button>
      </li>
    {{/each}}
  </ul>
</template>

现在让我们扩展我们的示例，将 Person 作为参数传递给我们的事件处理器。我们可以使用 fn 辅助函数：

import { on } from '@ember/modifier'
import { fn } from '@ember/helper';

function showPerson(person) {
  alert(`You clicked on ${person}`);
}

<template>
  <h2>{{@title}}</h2>

  <ul>
    {{#each @people as |person|}}
      <li>
        <button type="button" {{on "click" (fn showPerson person) }}>{{person}}</button>
      </li>
    {{/each}}
  </ul>
</template>

许多组件需要维护一些状态。让我们引入一个 currentPerson，用于跟踪用户最后点击了哪个人。在 Ember 组件中保持状态的惯用方法是在组件类上使用 @tracked：

import { on } from '@ember/modifier'
import { fn } from '@ember/helper';
import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';

export default class extends Component {
  @tracked currentPerson;

  showPerson = (person) => {
    this.currentPerson = person;
  };

  isCurrentPerson = (person) => {
    return this.currentPerson === person;
  };

  <template>
    <h2>{{@title}}</h2>

    <ul>
      {{#each @people as |person|}}
        <li>
          <button type="button" {{on "click" (fn this.showPerson person) }}>{{person}}</button>
          {{#if (this.isCurrentPerson person) }}
            ⬅️
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </template>
}

现在我们已经编写了应用并验证了它在开发环境中运行正常，是时候为部署给用户做准备了。

为此，请运行以下命令：

npm run build

package.json 中的 scripts.build 脚本会运行 vite build，它会将组成你应用的所有资源（JavaScript、模板、CSS、Web 字体、图片等）打包。

在这种情况下，我们告诉 Vite 为生产环境构建，因为运行 vite build 而不指定 --mode 默认为 --mode production。这将创建一个准备上传到你的 Web 主机并经过优化的包。构建完成后，你将在应用的 dist/ 目录中找到所有已连接并压缩的资源。

如果你将应用部署到 Apache Web 服务器，首先为应用创建一个新的虚拟主机。为了确保所有路由都由 index.html 处理，请将以下指令添加到应用的虚拟主机配置中：

FallbackResource index.html

Netlify 是将你的应用部署到 Web 以便与他人分享的众多方式之一！

为什么要选择 Netlify？

它不需要很高的知识水平即可将你的网站部署到生产环境。Netlify 提供免费帐户选项，无需信用卡。这些文档本身就是托管在 Netlify 上的，而 emberjs.com 的其他部分则使用 Heroku、Fastly、GitHub Pages 和 AWS 托管。总而言之，Ember 开发人员有很多选择来部署他们的应用！Netlify 只是你的众多选择之一。

遵循以下步骤，你将在几分钟内让你的网站上线运行：

首先，如果你还没有 Netlify 帐户，你需要注册一个 Netlify 帐户。

配置 Netlify URL 处理

下一步是让 Web 应用服务器知道如何处理 URL。有两种方法。

第一，你可以在 ember-quickstart/public 文件夹中创建一个名为 _redirects 的文件。在第一行添加 /* /index.html 200 并保存文件。这将让服务器知道将所有页面重定向到 index.html 文件。重定向后，Ember.js 应用本身将为诸如 /scientists 等 URL 生成匹配的 HTML。

第二，你可以使用社区创建的插件，例如 ember-cli-netlify 来处理 URL。

现在你已准备好将应用部署到 Netlify 平台进行生产。有两种方法：

1. 使用拖放部署到 Netlify
2. 使用 Git（特别是 GitHub）部署到 Netlify

使用拖放部署到 Netlify

你可能需要重新创建你的 dist 目录，以通过运行此命令包含对 _redirects 文件所做的更改：

npm run build

一旦你登录到你的 Netlify 帐户并进入“Sites”部分，你应该会看到 Netlify 的拖放区域。

接下来，在本地机器上找到你的 dist 文件夹，并将其拖放到该区域。

当你的文件上传成功后，你应该会在“Getting started”部分看到你的部署状态。

当你看到如上所示的“Your site is deployed”时，你的网站现已上线，你可以点击“Getting started”部分上方的链接查看你的网站。

恭喜！你的网站现已上线并在生产环境中运行！

使用 Git（特别是 GitHub）部署到 Netlify

确保你已登录 Netlify 帐户并处于“Sites”部分。

点击名为“New site from Git”的按钮。

点击“Continuous Deployment”下的“GitHub”按钮以连接到你的 GitHub 帐户。请注意，你将被带到一系列 GitHub 登录屏幕，并被要求选择你与 Netlify 相关的 GitHub 首选项。

成功将你的 GitHub 帐户与 Netlify 连接后，你应该会看到一个可供选择的仓库列表。选择或搜索你想要部署的 GitHub 仓库。

如果你已成功选择你的仓库并且它是一个 Ember 应用，Netlify 将自动生成部署设置，如下所示。这些说明假设你不想更改 Netlify 生成的任何默认设置。所以，如果一切看起来没问题，请点击“Deploy site”按钮。

点击“Deploy site”按钮后，你将被带到你的网站“Overview”，你应该会看到部署的状态。

当你看到如上所示的“Your site is deployed”时，你的网站现已上线，你可以点击“Getting started”部分上方的链接查看你的网站。

恭喜！你的网站现已上线并在生产环境中运行！

现在你的应用已部署，接下来该做什么？

文档中有一个官方的免费教程，深入探讨了你今天使用的一些特性。试试看！

既然你已经掌握了基础知识，你感到有创意和冒险精神了吗？Ember 社区已经创建了数百个插件，你可以免费在应用中使用。插件让你能够快速添加日历、导航栏、支付、身份验证、主题等功能。访问 Ember Observer 探索更多可能性！

我们制作的应用有点朴素。你会 CSS 吗？将你的样式放入 app/styles/app.css，它会自动包含在你的应用构建中。

Ember 的特别之处在于，你创建的每个应用都与其他人制作的应用有很多共同点。这意味着你很有可能与那些有着相同兴趣和技术挑战的开发者联系起来。访问 Ember 社区页面了解你可以如何建立联系。查找附近的聚会、提问、订阅新闻通讯等等！我们期待见到你！