上周四，尤大在推特上正式官宣了VitePress 1.0的发布，这也是VitePress自诞生以来的第一个正式版本，大家可以放心的使用了！
那么，VitePress 到底是什么呢？它跟常用的 VuePress 有啥区别？让我娓娓道来
VitePress
VitePress 是一个由 Vue.js 开发团队维护的静态网站生成器，专门用于快速搭建基于 Vue.js 的文档网站。它基于 Vite 构建工具，并利用 Vue3、Vue Router 和 Markdown 来创建静态站点。
VitePress 的主要特点包括：
1. 基于 Vue3: VitePress 是基于 Vue3 构建的，因此可以充分利用** Vue3 的特性和性能优势。
3. 简单易用: 使用 Markdown 语法编写文档，无需繁琐的配置，可以快速搭建文档网站。
4. 即时开发: 借助 Vite 的即时开发服务器，可以在编辑文档内容时实时预览，提高开发效率。
5. 内置路由系统: VitePress 内置了 Vue Router，可以方便地管理文档之间的导航和跳转。
6. 主题定制: 支持自定义主题，可以根据自己的需求定制网站的样式和布局。 6. 静态生成**: 可以将 Markdown 文件转换为静态 HTML 文件，方便部署到任何静态文件托管服务上。
总的来说，VitePress 是一个简单、快速且功能丰富的静态网站生成器，特别适用于构建基于 Vue.js 的文档网站，如官方文档、技术博客等。
从一个简单的示例说起
接下来使用一个简单的示例来说明用 VitePress 开发一个静态网站有多简单。
1. 首先安装 VitePress.
pnpm add -D vitepress
2. 创建 vitepress 项目
pnpm vitepress init
得到如下结构的工程：
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ api-examples.md
│ ├─ markdown-examples.md
│ └─ index.md
└─ package.json
docs 目录作为 VitePress 站点的项目根目录。.vitepress 目录是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的位置。
3. 启动项目
pnpm run docs:dev
得到如下常规文档站点布局的网站：
• 首页
• 文档详情页
接下来，你只要改改 markdown 文件即可更新里面的内容了，是不是 **so easy **?
VitePress 跟 VuePress 啥区别？
VitePress 和 VuePress 都是由 Vue.js 团队开发的静态网站生成器，它们的目标都是用于快速构建基于 Markdown 的文档网站，但它们之间也有一些区别：
1. 底层构建工具：
• VuePress 使用的是 Webpack 作为底层构建工具，而 VitePress 使用的是 Vite。
• Vite 基于 ES Module（ESM）和原生 ESM 静态分析的特性，具有更快的构建速度和开发体验。
2. 构建速度：
• 由于使用了不同的构建工具，VitePress 在开发和构建过程中比 VuePress 更快。
• VitePress 利用 Vite 的快速构建特性，可以实现秒级的热重载和快速的开发体验。
3. 功能支持：
• VuePress 相对于 VitePress 有更多的功能支持和插件生态，例如自定义主题、插件扩展等。
• VitePress 目前还处于相对较早期的阶段，功能相对较少，但由于其基于 Vite 的特性，可以预期未来会有更多功能的添加和改进。
4. 定位和适用场景：
• VuePress 更适合用于构建包含大量文档内容的文档网站，提供了更丰富的功能和扩展性，适用于需要定制化程度较高的项目。
• VitePress 更适合用于快速搭建简单的文档网站或静态博客，对于小型项目或快速原型开发具有更好的开发体验。
选哪个呢
短期对于生态有顾虑，或者当前团队中使用的是 VuePress 的建议仍旧保持，对于全新项目更推荐使用 VitePress。 因为官方已经说了“无法保持足够精力同时支持VitePress 和 VuePress两个工具的迭代，未来会将重点放在 VitePress”。
当然，这两个从使用上来说都比较简单，目前看来并没有太大的差异壁垒，具体使用结合团队实际情况即可。
我是斌少，十年经验大厂全栈开发，多年一线leader，分享编程经验、技术干货，帮你少走弯路、快速成长。
