现在，使用 ember 开发前端项目已经成为了很多前端工程师的首选。而在其中，npm 包 ember-md-components 更是被广泛应用。它提供了一些基本的 Material Design 风格的 UI 组件，方便快捷地创建美观的用户界面。本文将介绍如何使用它，以及相关注意事项。
安装
首先，需要安装 npm 包管理工具，然后在项目的目录中使用以下命令安装 ember-md-components：
npm install ember-md-components --save
使用
在主页面中，先导入所需的组件：
import Ember from 'ember';
import layout from '../templates/components/my-component';
import { MdButton, MdCard, MdDialog } from 'ember-md-components';其中，layout 和 '../templates/components/my-component' 是你自己创建的 Layout 和组件的路径。下面是一个简单的例子，调用了 MdButton：
-- -------------------- ---- -------
------ ------- ------------------------
-------- ------
-------
----------- ------
-------- -
------------ -
---------------------- ------
--
------------- -
---------------------- -------
-
-
---在模板中，使用这个组件：
-- -------------------- ---- -------
--- -------- --
------------ ------------------ ---------------- ---------------
---- ------
--------------
------------
---------------
--------------- ----------------
---- ------------------------
------ -----
------
---- --------------------------
------ -------
------
---- --------------------------
-------
------------------
-------- ----------------
-----
---------
------
--------------这个例子中，我们使用了 MdButton 和 MdDialog 两个组件。MdButton 显示一个按钮，点击后触发 MdDialog 组件，打开一个对话框。
注意事项
使用 npm 包 ember-md-components 有几个需要注意的地方：
依赖
本组件包含了一些依赖，需要在项目中同时安装。类似于下面这些：
"dependencies": {
"ember": "2.10.0",
"ember-cli-babel": "5.1.7",
"ember-composability": "0.3.1",
"ember-css-transitions": "0.6.7",
"ember-modal-dialog": "1.0.1"
}样式
本组件自带 Material Design 样式，不需要额外导入。但是如果你想自定义样式，需要在 app 样式表中添加以下代码：
@import 'ember-md-components';
并且可以在定制时，覆盖其默认样式。
版本号
由于组件版本不断更新，使用时需要注意版本号的匹配。在 package.json 文件中，配置依赖时，需要注意版本之间的兼容性。
结论
npm 包 ember-md-components 提供了方便、美观的 Material Design 风格的 UI 组件，适用于各种 ember 项目。在使用中有所注意，可以使代码更加简洁、美观和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1da563576b7b1eccd1