背景
对于前端开发者来说，平时在工作中使用的组件库很多时候是自己团队内部所开发的。因此，为了能够更好地展示组件库内的组件和方便其他团队成员的使用和了解，我们需要一个工具去对每个组件进行文档的编写和展示，于是 ember-cli-addon-docs 应运而生。
ember-cli-addon-docs 是一个基于 Ember.js 的 npm 包，可以帮助我们快速编写和展示组件库中的组件文档。
安装
在使用 ember-cli-addon-docs 之前，需要先在你的项目中安装 Ember.js，安装命令如下：
npm install -g ember-cli ember new your-project
接下来，在项目根目录下执行以下命令安装 ember-cli-addon-docs：
ember install ember-cli-addon-docs
这一步完成后，我们可以在项目目录下看到一个 docs 目录，这个目录就是用来存放组件文档的。
使用
编写文档
在 docs 目录下创建一个 .md 文件，编写组件文档，格式如下：
-- -------------------- ---- ------- ----- ------------------------- ---- ----- ------ ---- ------- ----- ---------- ---- -- ----- ---- ----- --------- ---- ------ ---------------------展开代码
{{!-- 对组件的 API 进行描述 --}}
API
属性列表：
foo- 组件参数 A。bar- 组件参数 B。
其中，`{{example-component}}` 是一个演示组件效果的 hbs 代码块，`foo` 和 `bar` 是组件所接受的参数。 ### 运行 运行以下命令可以启动文档服务：
ember serve
启动成功后，在浏览器中访问 `http://localhost:4200/docs` 可以看到我们编写的组件文档效果。 ### 打包 当我们完成组件库的编写后，需要将组件库打包成一个 Ember 插件供其他项目使用。这一步可以通过执行以下命令完成打包：
ember addon
打包完成后，会生成 `your-addon-name` 的目录，里面包含了我们的组件库代码和相关配置。 至此，我们已经成功地使用了 ember-cli-addon-docs 来编写和展示组件文档。希望本文对于大家学习和使用 ember-cli-addon-docs 有所帮助。 > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/59803) ，转载请注明来源 [https://www.javascriptcn.com/post/59803](https://www.javascriptcn.com/post/59803)
