Vitepress

Vitepress

版本：1.0.0-rc.1

这里使用在Vue3组件库中作为项目文档说明使用，另外版本见差异有点大，如版本不一致请参照官方文档

1、安装&初始化

1.1、安装

yarn add vitepress@1.0.0-rc.1

1.2、初始化

PS D:\WebstromProject\chenxing> npx vitepress init

  vitepress v1.0.0-rc.1

┌   Welcome to VitePress! 
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  Chenxing UI
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme + Customization
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

Tips:
- Make sure to add .vitepress/dist and .vitepress/cache to your .gitignore file.

1.3、启动

此时使用yarn docs:dev可以看到下面页面

2、配置

2.1、index.md

生成docs目录下index.md对应的即为主页，可编写md文件进行自定义配置

actions下theme即为主页按钮，features下title即为主页card

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

hero:
  name: "Chenxing UI"
  text: "适用于vue3的组件库"
  tagline: “天地如此旷大，以后我们要一起去最高的楼阁，喝最烈的酒，看最远的山。”
  actions:
    - theme: brand
      text: 快速开始
      link: /markdown-examples
    - theme: alt
      text: 看看其他的
      link: https://www.baidu.com/

features:
  - title: 特性1
    icon: 😊
    details: 大佬打怪忙，萌新自彷徨。吠吠猎狗猖，黝黝蜘蛛狂。
  - title: 特性2
    icon: 🤯
    details: 奶奶种地忙，老八做饭香。老麦下矿场，十年不回乡。女武一上场，不说就是莽。温蒂小可爱，姐姐在身旁。
  - title: 特性3
    icon: 😈
    details: 伍迪砍树快，还能下汪洋。大头食不尽，断送满粮仓。可怜哑小丑，未能述衷肠。
  - title: 特性4
    icon: 😔
    details: 萌新无人问，熊孩烧家狂。苦建几十天，野火尽送葬。
  - title: 特性5
    icon: 😭
    details: 铁锤携于手，断送猪人房。火腿带上身，直指犀牛箱。暴动猴子狂，失手把命亡。心酸不告别，退出路人房。材料盈满贯，猴子做嫁妆。
  - title: 特性6
    icon: 🙂
    details: 秋季不努力，冬天共荒凉。孤芳不得赏，遂至路人旁。相遇难相忘，徒增人感伤。
---

2.2、.vitepress/config.ts

nav是页面导航，sidebar表页面的左侧导航，"/guide/"表示是针对此页面配置的左侧导航，link即

import { defineConfig } from "vitepress";

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "Chenxing UI",
  description: "一个适用于vue3的组件库",
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: "首页", link: "/" },
      { text: "指南", link: "/guide/guide" },
      { text: "组件", link: "/components/components" },
      { text: "关于", link: "/about/about-me" }
    ],

    sidebar: {
      "/guide/": [
        {
          text: "指南",
          items: [
            { text: "安装使用", link: "/guide/guide" },
            { text: "联系我", link: "/guide/contact-me" }
          ]
        }
      ],
      "/components/": [
        {
          text: "基础组件",
          items: [
            { text: "Icon", link: "/components/x-icon" },
            { text: "Button", link: "/components/x-button" },
            { text: "Card", link: "/components/x-card" }
          ]
        },
        {
          text: "反馈组件",
          items: [{ text: "Message", link: "/components/x-message" }]
        },
        {
          text: "工具",
          items: [{ text: "Util", link: "/components/x-util" }]
        }
      ],
      "/about/": [
        {
          text: "关于",
          items: [
            { text: "项目", link: "/about/about-project" },
            { text: "我", link: "/about/about-me" }
          ]
        }
      ]
    },

    socialLinks: [{ icon: "github", link: "https://gitee.com/xumeng03/chenxing" }]
  }
});

3、打包发布

注意此时打包后查看是不能正常打开的，需要部署后才能正常访问，如果需要设置路径的话可以使用base参数设置路径

By default, we assume the site is going to be deployed at the root path of a domain (/). If your site is going to be served at a sub-path, e.g. https://mywebsite.com/blog/, then you need to set the base option to '/blog/' in the VitePress config.

Example: If you're using Github (or GitLab) Pages and deploying to user.github.io/repo/, then set your base to /repo/.

这里使用docker部署

docker run -d -p 10001:80 -v docs:/usr/share/nginx/html --name docs nginx:alpine
cd /var/lib/docker/volumes/docs/_data/
# 随后将build后内容放入目录中即可尝试访问