前言

前面搭建好了组件库的环境，接下来就是组件库的文档了，我准备使用vitepress来进行搭建组件库文档。

好吧，开始了。

开始

安装vitepress

安装

pnpm add -D vitepress

初始化

pnpm vitepress init

出现下面这个内容

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Site title:
│  merikle-ui
│
◇  Site description:
│  一个vue3组件库
│
◆  Theme:
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization
│  ○ Custom Theme
└

我选的Theme为第二个

在doc文件夹下添加脚本package.json里面添加脚本

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

接着可以跑通了

为了以后打开文档方便，在根目录下的package.json添加命令行

"docs:dev": "pnpm run -C docs docs:dev",

接着可以进行跑通了 pnpm run docs:dev

配置打包工具

pnpm install vite -D

在docs目录下创建vite.config.ts

import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
   
  ],

})

安装unocss

unocss可以更加方便的写css，写法类似bootstrap在class里面写，具体的可以看官方文档unocss的使用

这里进行搜索相应的css

在docs目录下

pnpm add -D unocss

在vite.config.ts中配置

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

创建uno.config.ts

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

开始配置vitepress

基本配置

在.vitepress目录下的config.mts中进行你想要的配置,我的配置如下

import { defineConfig } from 'vitepress'
import demoblock from 'vitepress-demoblock';
import { containerPreview, componentPreview } from '@vitepress-demo-preview/plugin'
import DefaultTheme from "vitepress/theme";
// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "merikle-ui",
  description: "一个vue3组件库",
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: nav(),
    sidebar: {
      '/vitepress/guid/': { base: '/vitepress/guid/', items: sidebarGuide() },
      '/vitepress/components/': { base: '/vitepress/components/', items: sidebarComponents() }
    },
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]
  },
  markdown: {
    config(md) {
      md.use(containerPreview)
      md.use(componentPreview)
    }
  }
})


function nav(): DefaultTheme.NavItem[] {
  return [
    {
      text: '首页',
      link: '/',
    },
    {
      text: '文档',
      link: '/vitepress/guid/getting-start',
      activeMatch: '/vitepress/guid/'
    },{
      text: '组件',
      link: '/vitepress/components/button',
      activeMatch: '/vitepress/components/'
    },
  ]
}

function sidebarGuide(): DefaultTheme.SidebarItem[] {
  return  [
    {
      text: '简介',
      collapsed: false,
      items: [
        { text: '快速开始', link: 'getting-start' },
        { text: '安装', link: 'install' }
      ]
    }
  ]
}

function sidebarComponents():DefaultTheme.SiderbarItem[]{
  return [
    {
      text: '组件',
      collapsed: false,
      items: [
        {text: 'icon',link: 'icon'},
        { text: 'button', link: 'button' }
      ]
    }
  ]
}

我的首页内容就在docs/index.md中进行修改的内容

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "merikle-ui"
  text: "一个vue3组件库"
  tagline: My great project tagline
  actions:
    - theme: brand
      text: 快速入门
      link: /vitepress/guid/getting-start
    - theme: alt
      text: 组件库
      link: /vitepress/components/icon

features:
  - title: Feature A
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - title: Feature B
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - title: Feature C
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
---

配置路由

根据上面的来配置路由剩下的配置路由就可以类似配置了，也可以去看官方的路由配置vitepress路由

效果: 效果图快速开始

安装vitepress-demo-preview

通过安装这个插件就可以让你写的样式在vitepress里面进行展示出来详情配置请看这里

配置完成这个插件之后就可以写一些内容

//  docs/vitepress/example/button/button.vue
<script setup lang="ts"></script>

<template>
  <button>确定</button>
</template>

<style scoped>
button {
  border: 0;
  border-radius: 5px;
  padding: 2px 10px;
  background-color: cornflowerblue;
  outline: none;
  color: white;
}
</style>

// docs/vitepress/components/button.md
# 按钮
<preview path="../example/button/button.vue"></preview>

效果图最终效果图

使用vitepress来搭建组件库文档

前言

开始