Vitepress搭建组件库文档（上）—— 基本配置

在 vite ���现以前，vuepress 是搭建组件库文档不错的工具，支持以 Markdown 方式编写文档。伴随着 vite 的发展，vitepress 已经到了 1.0.0-alpha.22 版本，很多博客还是基于 0.x 版本，1.0.0 与 0.22 配置略有差别，尤其是一些 vitepress 插件不支持 1.0.0 版本，如 vitepress-theme-demo（用它可以方便的编写组件 demo）。虽然现在 1.0.0 还是 alpha 版本，咱也可以尝试使用，反正遇到什么坑就去填什么坑就可以了呗。

1 初始化工程

1.1 创建项目

创建目录（目录名自己取，这里我取名为 doc-vitepress-archetype）作为文档项目的根目录，在命令行进入该目录，使用 npm/yarn/pnpm 初始化为 npm 项目（生成 package.json）。

pnpm init

之前看过优雅哥文章的伙伴应该清楚，优雅哥一直习惯使用 yarn，但从本文开始，包管理工具我都换做 pnpm，具体原因在后面的搭建 monorepo 风格组件中再谈。

添加 vitepress 为开发依赖：

pnpm install vitepress -D

当前 vitepress 版本为 1.0.0-alpha.22，后面如果发布正式版后有 broken change，咱又更新文章。

1.2 创建目录及文件

1. 在项目根目录下创建目录 docs（这里的目录名 docs 与后面配置 package.json 中 scripts 的参数一致），并在 docs 目录中创建 index.md 文件

# Hello Vitepress

1. 在 docs 目录下创建公共资源目录 public，该目录与 vite vue3 项目的 public 一样，弄一个 logo.png 到该目录中。

此时目录结构为：

doc-vitepress-archetype/|- docs/|- index.md|- public/|- logo.png|- package.json

1.3 添加 scripts

在 package.json 中添加项目的启动、打包、预览命令：

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

dev 是开发模式启动 vitepress；build 为打包；serve 是对打包后的结果启动服务预览。命令参数中的 docs 就是上面在根目录创建的目录名 docs。

1.4 启动服务

在控制台执行 pnpm dev，启动服务，在页面访问控制台输出的地址，默认该页面支持 dark/light 切换。页面如下

dark 模式：

light 模式：