如何使用vitepress写一套自己的ui文档

vite

vitepress

安装

• 第一步：创建目录

    mkdir vitepress-starter && cd vitepress-starter

• 第二步：vitepress 首选推荐使用yarn 创建包管理工具进行初始化

    yarn init

• 第三步：本地安装vitepress

    yarn add --dev vitepress

• 第四步：创建你的第一个文档

    mkdir docs && echo '# Hello VitePress' > docs/index.md

• 第五步：给package.json添加相关命令

    {
      "scripts": {
        "docs:dev": "vitepress dev docs",
        "docs:build": "vitepress build docs",
        "docs:serve": "vitepress serve docs"
      }
    }

• 第六步：本地运行vitepress

    yarn docs:dev

目录结构

├── .vitepress
│   ├── config.js
│   └── theme
│       ├── components
│       │   └── contentmenu.vue
│       ├── index.js
│       └── style.less
├── README.md
├── components
│   ├── button
│   │   └── index.md
│   ├── contextmenu
│   │   └── index.md
│   ├── layout
│   │   └── index.md
│   └── log.md
├── docs.md
├── index.md
├── tags.md
└── vuu
    ├── any.md
    ├── index.md
    └── log.md

vitepress 配置

module.exports = {
  head: [
    [
      'meta',
      {
        name: 'viewport',
        content:
          'width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no',
      },
    ],
    ['meta', { name: 'keywords', content: 'vite vui' }],
    ['link', { rel: 'icon', href: '/favicon.ico' }],
  ],
  title: 'Vite vui',
  base: '/vite-vui-docs/',
  themeConfig: {
    search: true,
    sidebar: {
      '/': [
        {
          text: 'vui',
          children: [
            { text: '介绍', link: '/' },
            { text: '日志', link: '/components/log' },
            { text: 'Button', link: '/components/button/' },
            { text: 'Layout', link: '/components/layout/' },
            { text: 'contextmenu', link: '/components/contextmenu/' },
          ],
        },
        {
          text: 'vuu',
          children: [
            { text: '介绍', link: '/vuu/' },
            { text: '日志', link: '/vuu/log' },
            { text: '某个功能', link: '/vuu/any' },
          ],
        },
      ],
    },
    author: 'bhabgs',
    nav: [
      { text: '首页', link: '/' },
      { text: '分类', link: '/tags' },
    ],
  },
  dest: 'public',
};

sidebar

问题

1. 当你的ui工具存在v-* 的用户自定义指令后，并且在vitepress中引入了在.md或者vue组件中使用时，会提示如下错误。vue官方提供了相关解决方案 安装该补丁patch-vue-directive-ssr能过解决该问题 问题原因可点击查看，相信在vitepress 1.0正式版本发布后就不会有该问题了。

custom directive is missing corresponding SSR transform and will be ignored.,

*** 问题持续更新中

vitevui、vitevuu 的建设方案也会在后续的文章中与大家分享