Vite 驱动、启动更快、配置更少——从零搭建文档站
不同于 vuepress 是基于 Webpack 构建，vitepress 基于 vite 搭建，启动更快，配置更少，热更新更快，更适合于结合 vue3 快速搭建文档库或者博客。本文章适用于新入手 VitePress 搭建者，至于如何发布自己的组件库或者如何在组件库中搭建发布文档，则在后续文章提供。
要我们开始吧。首先创建一个项目：
mkdir vitepress-starter && cd vitepress-starter
npm init
npm i --dev vitepress vue
mkdir docs && echo '# Hello VitePress' > docs/index.md以上我们创建了一个 vitepress-starter 文件夹，在 vitepress-starter 文件夹下面创建了 docs 文件，docs 文件创建了 index.md 的 md 文档并输入了一个标题 hello vitepress。
package.json 添加以下 scripts：
{
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
}启动文档网站的本地服务器：npm run docs:dev。
VitePress 将在 http://localhost:5173 启动一个本地开发服务器。
vitepress 的所有配置均在 .vitepress 中，放置所有 VitePress 特定文件的地方。首先在 docs 文件下创建 .vitepress 文件夹，.vitepress 文件夹下创建 config.js 配置文件，所有定制化均在此文件。.vitepress/config.js 应该导出一个 JavaScript 对象。
export default {
themeConfig: {
siteTitle: 'My Custom Title'
}
}此时文档的标题已经替换，如未替换重启下项目。
docs 文件夹下创建 public 文件夹，此 public 文件夹是存放所有静态文件的地方，添加一个 logo.png：
export default {
themeConfig: {
siteTitle: 'My Custom Title',
logo: '/logo.png',
}
}此时 logo 在文档库已经添加。
顶部导航同样需要在 .vitepress/config.js 设置，我们单独将 nav 抽离出来，方便维护，在 .vitepress 下创建 nav.js 文件：
export const nav = [
{ text: 'Javascript', link: '/Javascript/', activeMatch: '/Javascript' }, // 匹配Javascript文件夹下面index.md
{ text: 'Html', link: '/Html/' , activeMatch: '/Html'}, // 匹配Html文件夹下面index.md
{ text: 'Baidu', link: 'https://baidu.com/' }, // 第三方链接
{text:'css' , items: [{ text: 'css3', link: '/css3/' }]} // 可嵌套二级导航
]含义：text 为 nav 导航的文案；link 为链接地址，绝对路径会跳转第三方，/Javascript/ 会在 docs 为根目录查找对应文件夹下的 index.md；导航可多层嵌套注意嵌套格式。由于 link 到 docs 对应文件夹目录下面的 index.md，我们在 docs 创建对应的文件夹及 index.md。
config.js 配置 nav 导航：
import { nav } from "./nav"
export default {
themeConfig: {
siteTitle: 'My Custom Title', // 标题
logo: '/logo.png', // logo
nav: nav, // 顶部导航 可多层嵌套
}
}此时文档预览已有 nav 导航（未变化重启项目，后面不再赘述）。
我们的需求是根据 nav 导航，对应展示不同的 sidebar。.vitepress/config.js 创建 sidebar.js：
export const sidebar = {
'/Javascript': [
{
text: 'Javascript',
items: [
// This shows `/Javascript/index.md` page.
{ text: 'Javascript1', link: '/Javascript/' }, // /Javascript/index.md
{ text: 'Javascript2', link: '/Javascript/index2' }
]
},
],
'/Html': [
{
text: 'Html',
items: [
// This shows `/Html/index.md` page.
{ text: 'Html1', link: '/Html/' }, // /config/index.md
{ text: 'Html2', link: '/Html/index2' },
]
}
],
'/css': [
{
text: 'css',
items: [
{ text: 'css3', link: '/css3/' },
]
}
]
}config.js 配置 sidebar 导航：
import { nav } from "./nav"
import { sidebar } from "./sidebar"
export default {
themeConfig: {
siteTitle: 'My Custom Title', // 标题
logo: '/logo.png', // logo
nav: nav, // 顶部导航 可多层嵌套
sidebar: sidebar, // 侧边栏 数组对象两种方式 对象根据顶部导航显隐 数组则全部展示
}
}此时文档可根据 nav 导航，切换对应的 sidebar 导航，sidebar 同样会链接到不同 md 文档。
vitepress 提供了三种页面布局：doc、page、home。docs/index.md 文件做以下修改：
---
layout: home
hero:
name: VitePress
text: Vite & Vue powered static site generator.
tagline: Lorem ipsum...
image:
src: /logo.png
alt: VitePress
actions:
- theme: brand
text: Get Started
link: /guide/what-is-vitepress
- theme: alt
text: View on GitHub
link: https://github.com/vuejs/vitepress
features:
- icon: ⚡️
title: Vite, The DX that can't be beat
details: Lorem ipsum...
- icon: 🖖
title: Power of Vue meets Markdown
details: Lorem ipsum...
- icon: 🛠️
title: Simple and minimal, always
details: Lorem ipsum...
---此时首页已发生变化（点击 Logo 可返回首页）。
首页我们已经优化，接下来可进行 md 文档优化，现在仅仅是输出文案，md 语法可以掌握下。我们在 Javascript/index.md 增加下 md 语法：
[首页](/) <!-- 点击跳转到 根目录的 index.md -->
[Html](/Html/) <!-- 点击跳转到 Html 目录的 index.html -->| aa | bb | cc |
| ------------- |:-------------:| -----:|
|11 | 44 | 66 |
| 222 | 44 | 666 |
| 333 | 444 | 666 |::: info
This is an info box.
:::
::: tip
This is a tip.
:::
::: warning
This is a warning.
:::
::: danger
This is a dangerous warning.
:::
::: details
This is a details block.
:::
::: danger STOP
Danger zone, do not proceed
:::
::: details Click me to view the code
```js
console.log('Hello, VitePress!')
```其余可参考 md 语法。
import { nav } from "./nav"
import { sidebar } from "./sidebar"
export default {
themeConfig: {
siteTitle: 'My Custom Title', // 标题
logo: '/logo.png', // logo
nav: nav, // 顶部导航 可多层嵌套
sidebar: sidebar, // 侧边栏 数组对象两种方式 对象根据顶部导航显隐 数组则全部展示
// lastUpdatedText: '上次更新时间', //最后更新时间文本 根据git提交具体时间 展示时间更新信息
markdown: {
lineNumbers: true
},
docFooter: { //上下篇文本 文案修改
prev: '上一篇',
next: '下一篇'
},
editLink: { // 在 github 上编辑此页
pattern: 'https://github.com/XXXXXXXXXX',
text: '在 github 上编辑此页'
},
footer: { // 首页底部 文案
copyright: 'Copyright © 2021-present Younglina'
},
socialLinks: [ // 信息栏展示社交信息 链接博客地址等
{ icon: 'github', link: "https://github.com/XXXXXXXXXX" },
]
}
}参考文档：vitepress 中文文档。