尤雨溪又出新品了！VuePress 的升级版，更快、更灵活，构建更强大的网站！-CSDN博客

本文链接：https://blog.csdn.net/lgno2/article/details/139613311

大家好，我是前端宝哥。

哇！VitePress 终于发布 1.0 版本了！🎉

一直关注 VitePress 的小伙伴应该都知道，它是一款专门用来构建快速、内容为中心的网站的静态网站生成器 (SSG)，简单来说就是把你的 Markdown 文档变成美观的网页。

VitePress 基于 Vite 和 Vue 构建，可以说是 VuePress 的升级版，更强大、更灵活，当然也更现代啦！

VitePress 用起来很简单，可以用来做很多事情：

构建文档网站: VitePress 自带了一个为技术文档设计的默认主题，你看 Vite、Rollup、Pinia 这些项目的官方文档，都是用 VitePress 搭建的。就连 Vue.js 官方文档也是用 VitePress 搭建的，不过他们用的是一个定制的主题，可以支持多种语言。
创建博客、作品集或营销网站: VitePress 支持自定义主题，跟使用标准 Vite + Vue 开发一样灵活，功能强大。而且，它还能直接使用 Vite 生态系统的各种插件，可以加载本地或远程数据，在构建时动态生成路由。只要是在构建时就能确定数据的，你都可以用 VitePress 来构建。

这个博客：blog.vuejs.org，就是用 VitePress 的自定义主题和数据加载 API 构建的！

VitePress 的开发体验简直不要太好！

超快的启动速度： 基于 Vite，修改代码后立即生效，无需刷新页面，开发效率简直起飞！
支持多种 Markdown 扩展： frontmatter、表格、语法高亮等等，VitePress 提供了许多高级功能，方便你编写技术文档。
Vue 加持 Markdown: 每个 Markdown 页面其实就是一个 Vue 单文件组件，Vue 模板和 HTML 完美兼容，你可以直接在静态页面中添加交互功能。

VitePress 的性能也十分出色：

快速初始加载: 访问网站时，页面会先加载静态 HTML，速度非常快。然后，页面会加载 JavaScript 代码，将页面变成一个 Vue SPA，这个过程也很快，得益于 Vue 3 的优化。
页面内导航超级流畅: 网站内的后续导航不再需要重新加载整个页面，而是动态更新内容，而且 VitiePress 会自动预取视窗内的链接，导航体验非常流畅。
交互无压力: 为了让 Vue 的动态部分能够在静态 Markdown 页面中正常渲染，每个 Markdown 页面都会被处理成 Vue 组件，并编译成 JavaScript 代码。别担心，Vue 的编译器很聪明，会将静态部分和动态部分分开，这样既能保证交互功能，又能降低页面加载压力。

VitePress 1.0 版本的发布，离不开所有贡献者的努力！特别感谢 Kia King Ishii 和 Divyansh Singh 的付出，他们为 VitePress 带来了很多新功能，也让 VitePress 变得更加好用！

如果你想了解更多关于 VitePress 的信息，或者想体验一下它的强大功能，可以访问 VitePress 的官方网站：https://vitepress.dev/

我已经迫不及待地想要用 VitePress 来构建我的下一个项目啦！

往期推荐

38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集

我是前端宝哥，每日分享前端开发技术，关注下面二维码，围观我的朋友圈。