Ember 擁有豐富多樣的外掛生態系統，這些外掛能夠輕鬆的應用到工程中。外掛經常能為工程新增大量的功能，省時省力的同時，讓你能夠更好的集中精力到你的專案上。

要瀏覽外掛，請訪問 Ember Observer 網站。它將釋出到 NPM 的 ember 外掛分門別類，同時根據一系列的標準對這些外掛進行了評分。

ember-cli-tutorial-style

我們建立了一個名叫 ember-cli-tutorial-style 的外掛即刻來為教程新增樣式，而非讓你複製和貼上 CSS 來給 Super Rentals 新增樣式。這個外掛通過建立一個名叫 ember-tutorial.css

ember install ember-cli-tutorial-style

既然 Ember 外掛是 npm 包，那麼 ember install 將把它們安裝在 node_modules 目錄，並且在 package.json 中為其生成一個入口。成功安裝外掛之後，請確保重啟你的伺服器。重啟伺服器將引入新的 CSS 檔案，當你重新整理瀏覽器時，你會看到如下介面：

ember-cli-mirage

Mirage 是一個客戶端的 HTTP 存根庫，它經常被用於 Ember 的驗收測試。對於本教程的情況，我們將使用 mirage 作為我們的源資料。Mirage 將讓我們在開發時可以通過偽造資料來模仿一個後臺伺服器工作。
請像下面這樣安裝 Mirage 外掛：

ember install ember-cli-mirage

如果你在另一個 shell 裡執行 ember serve，請重啟伺服器以引入你建立的 Mirage。

現在，讓我們通過更新 mirage/config.js 來配置 Mirage ，使得我們可以傳送上面已經定義的租借資訊：

mirage/config.js

export default function() {
  this.namespace = '/api';

  this.get('/rentals', function() {
    return {
      data: [{
        type: 'rentals',
        id: 'grand-old-mansion',
        attributes: {
          title: 'Grand Old Mansion',
          owner: 'Veruca Salt',
          city: 'San Francisco',
          type: 'Estate',
          bedrooms: 15,
          image: 'https://upload.wikimedia.org/wikipedia/commons/c/cb/Crane_estate_(5).jpg'
        }
      }, {
        type: 'rentals',
        id: 'urban-living',
        attributes: {
          title: 'Urban Living',
          owner: 'Mike Teavee',
          city: 'Seattle',
          type: 'Condo',
          bedrooms: 1,
          image: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Alfonso_13_Highrise_Tegucigalpa.jpg'
        }
      }, {
        type: 'rentals',
        id: 'downtown-charm',
        attributes: {
          title: 'Downtown Charm',
          owner: 'Violet Beauregarde',
          city: 'Portland',
          type: 'Apartment',
          bedrooms: 3,
          image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg'
        }
      }]
    };
  });
}

這樣配置 Mirage 使得每當 Ember Data 發起一個連結到 /api/rentals 的 GET 請求的時候，Mirage 將返回這一個 JavaScript 物件的 JSON 的形式。為了讓它正常執行，我需要讓我們的應用預設訪問 /api 的名稱空間。如果沒有這些配置，我們應用中/rentals 的導航將和 Mirage 產生衝突。

為了實現它，我們可以生成一個應用介面卡（adapter）。

ember generate adapter application

這個介面卡將基於 Ember Data 的類來擴充套件 JSONAPIAdapter：

app/adapters/application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api'
});

原文地址