大家好,我是前端宝哥。
哇!VitePress 终于发布 1.0 版本了!🎉
一直关注 VitePress 的小伙伴应该都知道,它是一款专门用来构建快速、内容为中心的网站的静态网站生成器 (SSG),简单来说就是把你的 Markdown 文档变成美观的网页。
VitePress 基于 Vite 和 Vue 构建,可以说是 VuePress 的升级版,更强大、更灵活,当然也更现代啦!
VitePress 能做些什么?
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 的官方网站: vitepress.dev/
我已经迫不及待地想要用 VitePress 来构建我的下一个项目啦!