Ember旅程系列（五） -- 安装插件

英文原版：https://guides.emberjs.com/v2.13.0/tutorial/installing-addons/

Ember拥有丰富的插件生态系统可以让你很容易的在项目中使用它们。插件为项目提供了非常广泛的支持，可以让你解放到基本只需要关注项目本身。

若需要查看插件列表，请访问 Ember Observer 站点。该站点将插件分类汇总并且已经发布到NPM。

至于我们的Super Rentals项目，我们将采用其中两个插件： ember-cli-tutorial-style 和 ember-cli-mirage

ember-cli-tutorial-style

为了避免你机械性的 复制/粘贴 css样式，我们需要搞个插件，即 ember-cli-tutorial-style ，这个插件可以直接加样式。使用这个插件时需要生成一个名叫
ember-tutorial.css的样式文件，并且把它放在 项目的 vendor目录下。

vendor目录比较特殊，它下面的资源都会被编译到应用中。当Ember CLI 构建我们的应用时，它会把ember-tutorial.css的内容打包放到vendor.css文件中。

当Ember CLI运行的时候,它会把ember-tutorial.css 文件的内容装进vendor.css。 vendor.css文件会被app/index.html页面引用，从而让样式附着到应用上。

我们可以对vendor/ember-tutorial.css中的样式做适当的调整，只要一重新运行你的app。效果就会显示出来、

运行下面的命令来安装插件：

ember install ember-cli-tutorial-style

只要Ember插件由NPM安装，那么最终就会安装到node_modules目录中，并且在package.json文件中添加相应的条目。

请确保在插件安装完之后重启你的服务器。 服务器重启会让你新添加的样式应用到页面上：

ember-cli-mirage

Mirage 是一个位于客户端的HTTP服务器，一般用来做模拟测试。对于我们目前的应用来说，我们将使用Mirage来作为我们的数据源（模拟后台服务器、数据库）。
Mirage可以让我们在开发的时候造一些模拟数据，并且它自身可以模拟为后端服务器。

安装Mirage插件使用以下命令：

ember install ember-cli-mirage

紧接着，让我们来配置这个东西，并且让它给我返回之前一节定义的model假数据。这些事情请在mirage/config.js文件中完成：

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',
          propertyType: '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',
          propertyType: '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',
          propertyType: 'Apartment',
          bedrooms: 3,
          image: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Wheeldon_Apartment_Building_-_Portland_Oregon.jpg'
        }
      }]
    };
  });
}

这样配置的话，只要Mirage收到发送到”/api/rentals”的GET请求，就会返回定义的javascript json格式对象。 为了让它起作用，我们需要让我们的应用在发请求的时候默认的具有”api”名称空间（当然手动输入也是可以的）。 如果不这么设置，直接导航到”/rentals” 可能会与mirage起冲突。

为了实现目的，我们来生成一个适配器(adapter)：

ember generate adapter application

这个适配器将会继承自JSONAPIAdapter这个基类，它来自于Ember Data：

app/adapters/application.js

import DS from 'ember-data';

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

好了，重启你的server，让应用把mirage读取进来。

请注意了，到目前为止，虽然我们是搭建了Mirage来模拟后台返回数据。但是项目中我们还没更改数据的提供方式，数据依然是从app/routes/rentals.js文件中获得的硬编码。我们将在下一章节 “使用Ember data”中，通过mirage来模拟从后台获取数据。

本节完