# note

**Repository Path**: yan_yi_hao/note

## Basic Information

- **Project Name**: note
- **Description**: 个人博客用于记录学习笔记和知识点
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://yan_yi_hao.gitee.io/note
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-21
- **Last Updated**: 2023-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文档编写

## 组件库项目文档地址：https://ox4f5da2.github.io/seven-bit-docs/

## 项目结构目录
```
.
|--docs
|    |--.vitepress
|    |    |--components
|    |    |    |--CodeBox.vue            //代码块盒子
|    |    |    |--CollapseTransition.vue
|    |    |    └─ Log.vue
|    |    |--examples
|    |    |    |--alert
|    |    |    |    |--alert1.vue    //文档展示中不同功能的代码
|    |    |    |    |--alert2.vue    //文档展示中不同功能的代码
|    |    |    |    ...
|    |    |    ...
|    |    |--plugins
|    |    |--theme
|    |    |--utils
|    |    |--config.js
|    |    ...
|    |--examples
|    |    |--alert/index.md    //组件说明，调用.vitepress中examples具体相应例子
|    |    ...
|    |--guide    //guide页面相关
|    |--public   //assets
|    |--index.md
|    ..
|--packages
|    |--components
|    |    |--src       //组件
|    |    |    |--sbAlert
|    |    |    |    |--__alert__             //测试文件
|    |    |    |    |--style/.less           //css
|    |    |    |    |--index 
|    |    |    |    |--sbAlert.vue            //组件
|    |    |    |    |--types.ts               //interface及相关const定义  
|    |    |    |--index.ts                    //暴露
|    |    |    ...
|    |    ... 
|    |--eslint-config
|    |--utils   
|    ...
...
```

## 组件文档编写
在 `./docs/examples/*` 下建立自己编写的组件说明文档，比如编写了 `button` 组件，就创建 `button/index.md` 文件

## 组件示例编写
展示组件相关效果方法如下：
- 首先在 `./docs/.vitepress/examples/*` 下创建文件夹，名称为组件名字
- 然后编写组件使用示例，每个示例一个 `.vue` 文件
- 然后在需要的地方导入：
```md
## 基础用法
这是组件的基础用法

:::code [vue 文件的路径，比如 modal/modal1.vue 即可]
:::

```

## 文档地址配置
在 `./docs/.vitepress/utils/*` 下有写好的文件，只要大家按自己组件的类型选择相应的文件填写即可：
- dataDisplay -> 数据展示组件
- dataEntry -> 数据录入组件
- feedback -> 反馈组件
- general -> 通用组件

比如 `button` 是通用型组件那么在 `general.js` 内填写，填写规则如下：
- 找到 `items` 字段
- 在该字段内按照如下规则填写：
```js
{
  text: 'Button 按钮',
  link: '/examples/button/'
},
```
其中：
- text: 侧边栏展示文字，以[组件英文名字 + 空格 + 组件中文名字]的规定，且英文名首字母大写
- link: 以 `/examples` 固定开头，后面跟上自己的组件名字，与自己建立的文件夹名字对应，比如创建了 `button` 文件夹，那么 `link`  就填写 `/examples/button/`