“这是我参与「第五届青训营」伴学笔记创作活动的第 7 天
一、涉及知识点：

Vitepress文档开发

二、详细知识点介绍：

Vitepress的产生：VitePress 是 VuePress 的小弟弟，建立在 Vite 之上。在原来的基础上做了几点改进，完美的解决了原来存在的基于 Webpack 而导致的为一个只有几页的简单文档站点启动需要消耗开发服务器所需的时间。甚至 HMR 更新也可能需要几秒钟才能反映在浏览器中。而Vite很好的解决了该问题。
#改进点
它使用 Vue 3#利用 Vue 3 改进的模板静态分析，尽可能多地串化静态内容。
它在引擎下使用 Vite[#]可以实现：(vitepress.vuejs.org/guide/what-…)
- 更快的开发服务器启动
- 更快的热更新
- 更快的构建（在内部使用汇总）
更轻的页面重量#
不会为每个请求的每个页面传送元数据。这会将页面权重与总页数分离。仅发送当前页面的元数据。客户端导航将新页面的组件和元数据一起提取。
不使用 vue-router，因为 VitePress 的需求非常简单和具体 - 使用简单的自定义路由器。
倡导极简，vitepress的出现就是为了简化vuepress

三、实践练习例子：

工具：vscode
配置

1.创建新项目，创建并更改为新目录。

$ mkdir vitepress-starter && cd vitepress-starter

然后，使用首选包管理器进行初始化。

$ yarn init

2.安装 VitePres

添加 VitePress 和 Vue 作为项目的开发依赖项。

$ yarn add --dev vitepress vue

3. 创建您的第一个文档。

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

4.启动开发环境

向package.json添加一些脚本。

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

5.在本地服务器中提供文档站点。

$ yarn docs:dev

VitePress 将在上启动热重载开发服务器。http://localhost:5173

6.添加更多页面

让我们向网站添加另一个页面。创建您在步骤 2 中创建的文件名。现在您的目录结构应如下所示。getting-started.md``index.md

.
├─ docs
│  ├─ getting-started.md
│  └─ index.md
└─ package.json

然后，尝试访问，您应该会看到显示的内容。http://localhost:5173/getting-started.html``getting-started.md

这就是VitePress的基本工作方式。目录结构与 URL 路径相对应。您添加文件，然后尝试访问它。
在实际操作过程中可能会遇到报错的情况，我最开始使用的是pnpm管理包因为性能较为强大但是一直有问题，然后看vitepress的官方文档发现问题主要是出现在package.json的配置上了，将整个项目的package和vitpress的package.json弄混了，包管理方面没什么问题，pnpm是比npm和yarn高级的存在。具体的后面遇到还会详细研究。
五、引用参考：
Vitepress官方文档文档

文档开发-vitepress文档学习｜ 青训营大项目笔记