Vue 官方出品的 vitepress 是什么?

原创
前端路迹
2022-7-3 15:13
编辑于 2022-7-4 15:49

什么是 VitePress,官方的解释为:

VitePress 是VuePress的小兄弟,建立在Vite之上。

这个解释估计让不了解的人更摸不着头脑了,VuePress 也是 Vue官方出品,简单说就是一个基于 markdown 文件生产静态网站的工具,一个 VuePress 网站是一个由 Vue、Vue Router 和 webpack 驱动的单页应用。Vite 可以理解为和 Webpack 一样,都是一个打包构建工具,不过 Vite 基于浏览器原生支持ES模块,在性能上更出出众。

经过上面的解释,会发现 VitePress 似乎也是为了解决 VuePress 的一些问题而新创建的,官方对此也有解释。

结合官方文档介绍,总结以下,对比 VuePress,VitePress 有以下几个优势。

  1. 启动快,基于Vite,有着闪电般的热更新速度,开发体验非常棒
  2. 页面轻量
  3. 基于Vue3,性能更好
  4. 配置更简单

下面做一个项目来验证看是否真的如上面所说。

初始化

初始化很简单,新建一个文件夹 vite-demo,在文件夹下执行命令。

npm init -y
npm i vitepress vue --save-dev

接着新建一个文件夹 docs 文件夹,新增一个 index.md 文件。

再 package.json 中添加 dev 启动命令。

{
   "scripts": {
         "dev": "vitepress dev docs"
        }
}

启动 dev,可以看到启动真的是很快,基本上几秒就完成了启动。

启动后打开浏览器效果如下。

配置

上面只有一个页面,看起来比较简陋,目前 Vue 最新的官方文档都是基于 VitePress 来做的,去看这些网站就能知道 VitePress 能做出什么效果。比如最新的Vue 3的官方文档。

https://vuejs.org

可以看到网站风格非常适合做一些文档类的静态网站,整体调色也看着非常舒服。

配置也比较简单,可以参考官方文档。https://vitepress.vuejs.org/config/introduction.html

完整的配置的 ts 类型定义可以参考 https://github.com/vuejs/vitepress/blob/7b17d7d08deb9ffed74780dfab6ba2a5f6cc0477/types/default-theme.d.ts

可以利用 IDE 的智能感知和 jsdoc 类型提示。

总结

vitepress 相比 vuepress 性能更好,无论是开发时的启动及热更新速度,还是生产打包出来的页面,都表现出明显的优势。目前 vitepress 处于 alpha 阶段,部分文档还在更新中。

转载请注明出处。本文地址: https://www.qinshenxue.com/article/what-is-vitepress.html
关注我的公众号