Docs

✨ 介绍

Docs 是 fighting design 官方文档目录，使用 VitePress 进行开发。

vitePress 是一个 Vite 和 Vue 支持的静态站点生成器，使用 MarkDown 进行编写。如果你还不了解 MarkDown，可以通过这里进行学习。

如果你也想编写自己的 blog，可以在 VitePress 官方进行学习使用。vitepress-template 是我已经配置好的一个项目，也可以拿来开箱即用。

🐳 线上地址

• 官方文档：Fighting Design
• 仓库地址：Docs

🚧 编写规范

首先需要在 docs/components 目录下，新建一个以组件小写名，去掉首字母 F 的 *.md 文件。如：button，而不是 FButton。

• *.md 内，只允许出现一个一级标题 #，后面全部使用二级标题 ##，禁止出现二级标题以下的标题
• 一级标题为组件的名称 + 中文描述，中间要带有空格。如：Button 按钮、Icon 图标。这里的组件名要以大写开头
• 接下来每个二级标题用于描述配置信息，配置信息下面要写入简单的描述。如下，取自 button.md：

## 基本使用

`type` 属性可以配置不同的按钮类型，展示不同的颜色状态

• 并不是组件的所有配置项都要带有演示用例，突出主要即可
• 英文名要用反引号包裹，左右两边要带有空格。如： type 配置按钮的类型
• 描述信息之后要带有具体的配置例子
• 需要提供演效果的代码段，代码段使用已经封装好的 ::: demo 语法来展示 demo 和下拉菜单内容，详情配置可参考 plugins.ts 。例：

::: demo

<template #source>
<!-- source 插槽插入示例 -->
</template>

<!-- 默认插槽插入代码片段 -->

:::

• 在组件演示完之后，要写详细的 Attributes（必须）、Slots（可选）、Events（可选）描述信息。使用 table 进行编写，格式规范参考如下：

Attributes

参数	说明	类型	可选值	默认值
xxx	xxx	xxx	xxx	xxx

Slots

名称	说明
xxx	xxx

Events

事件名称	说明	回调参数
xxx	xxx	xxx

• 在上面表格中的 Attributes 的参数列、Attributes 的可选值列、Slots 的名称列、Events 的事件名称列 的内容需要使用反引号包裹，每一项都应该使用 kebab-case 形式
• 表格中需要详细的描述好每个选项

🔍 扩展语法

• 在 *.md 内部可以直接写入 vue 组件代码，完全可以正常解析
• 在 *.md 内部可以直接定义和本页面相关的样式，或者 TypeScript 语法，完全可以像下面这样使用：

# xxx

## xxx

code....

<script setup lang="ts">
TypeScript code...
</script>

<style scoped>
css code...
<style>

✏️ 引入

在你新建的组件文档文件之后，你需要在 sidebar 中引入你的文档，才可以正常显示

💡 测试

在项目根目录执行命令：

pnpm dev:docs

来启动测试文档

📒 贡献者

文档在 Attributes 或者 Slots 的结尾需要加入 Contributors（贡献者） 如果你参与了某个组件的开发或者维护，那么就可以将你放在该组件下发的开发者列表中！

格式如下:

a 标签的 href 属性用作你的 Github 首页地址，FAvatar 组件的头像地址用作你的 Github 头像地址。可在 Github 首页右键头像，复制头像地址填入。

<a href="" target="_blank">
  <f-avatar round src="" />
</a>

例如我的：

<a href="https://github.com/Tyh2001" target="_blank">
  <f-avatar round src="https://avatars.githubusercontent.com/u/73180970?v=4" />
</a>

💬 写在最后

规范可能随时会增加或者修改，在编写文档前请认真阅读规范指南。