安装插件

优质

小牛编辑

132浏览

2023-12-01

Ember拥有丰富的插件生态系统，可轻松添加到项目中。插件可以为项目提供广泛的功能，通常可以节省时间并让您专注于项目。
浏览插件，请访问Ember Observer网站。它列出并分类了已经发布到NPM的Ember插件，并根据各种标准为他们分配了一个分数。
对于超级租赁，我们将利用两个插件:ember-cli-tutorial-style和ember-cli-mirage。

ember-cli-tutorial-style

代替复制粘贴CSS样式到超级租赁应用，安装ember-cli-tutorial-style插件可以立即为应用添加CSS样式。ember-cli-tutorial-style会生成一个叫ember-tutorial.css的文件并放置在应用的vendor目录中。
vendor目录是Ember的一个特殊目录，其中可以包括被编译到应用程序中的内容。当Ember CLI执行构建时，会把ember-tutorialCSS文件的内容复制vendor.css文件中。该vendor.css文件被app/index.html引用，使得样式在运行时可用。可以自己打开app/index.html看看其中对于vendor.css的引用。
安装ember-cli-tutorial-style插件：

$ ember install ember-cli-tutorial-style

由于Ember插件是npm软件包，ember install请将它们安装在node_modules目录中，并在package.json中添加了条目。插件安装成功后，需要重新启动服务器。重新启动服务器(执行ember s)。

ember-cli-mirage

Mirage是一个客户端HTTP骨架库，经常用于Ember验收测试。对于本教程，我们将使用mirage作为我们的数据源而不是传统的后端服务器。mirage将允许我们在开发应用程序时创建假数据和模拟API。
安装mirage插件：

$ ember install ember-cli-mirage

需要注意mirage的config.js文件，这是定义API端点和数据的地方。我们将遵循JSON-API规范，这要求我们以某种方式格式化数据。我们修改mirage/config.js文件，以便mirage发回之前定义的租赁清单：

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

mirage会覆盖发送网络清单的javascript代码，并代替它们返回你指定的JSON串。这意味着你的开发工具中不会看到任何网络请求，而是会看到控制台中记录的JSON。我们修改mirage/config.js来配置Mirage，以便每当Ember Data发出GET请求/api/rentals时，Mirage将返回此JavaScript对象作为JSON，并且实际上没有网络请求。在mirage配置中，我们还定义了/api的命令空间。如果没有这个修改，应用程序导航到/rentals时会与Mirage冲突。
为了使这个起作用，需要应用程序来默认向/api命名空间发送请求。为此，我们要生成一个应用程序适配器。适配器是一个对象，Ember Data用它来确定我们如何与后台进行通信。我们将在本教程的后面更详细地介绍Ember Data。现在，我们为应用程序生成一个适配器：

$ ember generate adapter application

这个适配器(app/adapters/application.js)扩展了Ember Data的基础类JSONAPIAdapter:

import DS from 'ember-data';

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

请注意，在本教程的这一节上，app/routes/rentals.js文件仍然提供数据。我们将在“使用Ember Data”一节中使用这里设置的mirage数据。