组件库文档开发手册

配置

1. 在 docs/project-docs/docs/.vitepress/config.ts 配置文档路径

文档开发

1. 为了增加代码查看与复制按钮, 变成类似 antd 官网的格式, 必须使用 code-view 进行包装
2. 为了使代码高亮, 请使用 highlight-code 组件
3. 对于具体项目, 请在 project/xxxx 建立项目目录(xxx为项目名称), 在里面书写 业务组件代码

举例

具体可以参考loading

<script setup>
    import {QButtonGroup} from 'playground/q-buttom'
</script>

<code-view title="基本用法" description="基本按钮用法">
    <QButtonGroup xxx> </QButtonGroup>
    <div #codeText>
        <highlight-code code="let a= 1">
    </div>
</code-view>

123123

基本用法

基本按钮用法

let a= 1

公共组件库文档开发手册

注意

*** 重要重要重要, 开发时请遵守下列规则， 以便自动导入插件识别，否则会报错

1. 请将组件样式文件命名和组件文件命名一致
2. 根组件命名为 去掉q-或者q-antd的名称， 例如 q-loading组件命名为loading.vue
3. 文件夹命名必须以q-开头命名

新建公共项目

1. 如果是 方法, 请参考 utils 配置
2. 如果是 组件库, 请参考 vue3-pc-ui进行配置
3. 然后在 docs/project-docs/packages.json中引入

组件引入方式

1. docs/project-docs/docs/.vitepress/theme/index.ts引入

if (!import.meta.env.SSR) { // ssr不支持浏览器的API
    import("ant-design-vue").then(module => {
        ctx.app.use(module.Input)
        ctx.app.use(module.Button)
        ctx.app.use(module.Card)
    })
    import("@quantum-design/vue3-pc-ui").then(module => {
        ctx.app.use(module.QLoading)
        ctx.app.use(module.QTreeTable)
    })
    XXX // 此处加入 
}

2. 在文档中引入

<template>
    <ClientOnly> 
        <xxx></xxx>
    </ClientOnly>
</template>
<script setup>
    import xxx from 'xxx'
</script>

书写文档

1. md中 可以引入 组件文档使用

项目组件库文档开发手册

步骤

1. 在项目的 components 下, 新建 index.ts 文件, 将所有 组件导出
2. 执行 pnpm build:lib --filter xxx打包组件库
3. 在项目的package.json中, 按照以下代码配置

{
    ...,
    "main": "./dist-components/components-lib.umd.js",
    "module": "./dist-components/components-lib.mjs",
    "files": ["dist-components"],
    ...
}

4. 在 文档项目的package.json中, 按照以下代码配置(以playground举例)

{
    ...,
    "dependencies": {
        ...,
        "playground": "workspace:*",
        ...
    },
    ...
}

5. 在 .vitepress/theme/index.ts中 引入 打包好的 样式文件

import 'playground/dist-components/style.css';

5. 在md文件中引入组件库

<script setup>
    import {QButtonGroup} from 'ad.qmniu.com‘
</script>

<QButtonGroup> </QButtonGroup>

6. 对于经常用组件, 在vue3-project-docs/docs/.vitepress/theme/index.ts 中 使用 enhanceApp 注册