试试前些天尤老师提起的VitePress | 尝鲜记

前言

我们知道，前几天在杭州举办了第四届Vue.js开发者大会。会议中由vue的作者尤雨溪老师介绍了Vue 3生态的现状。

1.jpg

大概内容是，今年Vue开发者数量还是有比较大的增长，Vue 3周边库以及开发工具链都已经跟上了如Vuex4.0、Vue Router 4.0以及Quasar、Element Plus、And Design Vue、Vuetify、Nuxt3等。script setup 加 volar 结合ts，使得SFC 的 template是有很不错的开发体验，而且计划 Q2 end Vue 3就会成为主版本；另外已经决定不在支持IE11，Vue 2可以迁移到 @vue/compat或者等 v2.7版本。

具体详情可移步观看视频：

Vue.js作者尤雨溪在VueConf 2021谈Vue 3 生态进展

大家可能没太关注，其中他还提到VitePress，今天闲着先来尝尝鲜

image.png

什么是VitePress及其作用

引用尤雨溪的话：VitePress其实就是一个基于Vue3+Vite的静态站生成器

2.jpg

如果你之前用过VuePress、Hexo、Gatsby等静态站生成工具，可能很好理解，其实相当于VuePress，只是把Vue2换成Vue3，把webpack换成vite；如果你没有接触过，你就将它理解为：利用它可以搭建静态类网站，比如快速搭建博客或者文档等。其实偏向于文档，原因是VitePress旨在提供创作文档所需的最低限度的功能，正如作者所说，它是个弟弟

那为什么要用VitePress

换句话说它有什么优势？

其实优势也很明显，刚刚也说了，它相当于VuePress，当它将Vue2换成Vue3，把webpack换成vite，因此：

1. 它有VuePress的所有优点；如：可以在md里面混合vue组件等；

2. 具有Vite的速度；如：可以秒开一个VitePress开发服务器以及md的编辑也会瞬间更新

3. 利用Vue3的一些高阶特性，做了一些更细致的优化；如避免纯静态内容的double payload（双重负载）和hydration开销

一句话小结：性能好

所以，如果你有新的项目要做文档或者搭建需要博客，可以试试VitePress

开始搭建

创建项目并初始化

yarn init
yarn add --dev vitepress

创建index.md文档doc目录下，可以在文档中写上hello VuePress，方便测查

添加以下脚本到package.json中

  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }

注意：是在package.json的大括号里面填充，即{要填充的代码}

启动服务

yarn docs:dev

出现以下代码表示搭建成功

3.jpg

进入页面

通过http://localhost：3000进入
结果如图所示：

4.jpg

默认没有配置的情况下，页面很简洁，图中只有我们写的hello VuePress。不妨填充一些内容，我将本文md内容copy到index.md中，显示如图

5.2.jpg

到这已经成功出来了，挺简洁的，是我喜欢的调调

但是怎么没有导航那些呢，应该是按需配置

创建配置

首先在 docs 目录下创建.vitepress 目录，然后开始设置配置;在.vitepress文件夹下创建config.js，它是配置 VitePress站的必要的文件，其将导出一个 JavaScript 对象：

module.exports = {
  title: 'Hello VitePress',
  description: 'A VitePress site.'
}

title表示页面标题

description渲染成页面的

到这里的目录结果是这样子的

├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  └─ index.md
└─ package.json

另外需要注意：.vitepress需要用命令行命令进行创建，否则可能提示创建不了

如window系统使用md命令

md config.js

其实我们需要关注，完整的选项配置列表。因为它关系到调整网页的结构和样式是不是想要的。但是刚刚看官网这部分还是404的状态。

也很正常，并且人家说的很明白

Note this is early WIP! Currently the focus is on making Vite stable and feature complete first. It is not recommended to use this for anything serious yet.

意思是，这个早期的WIP（可理解成在制品），目前主要精力专注于Vite的稳定和功能的完整，对于一些serious的事不建议使用它！

所以有些功能都还不完善，更别说文档，还中文文档。在当下的英文文档中，可以看到里面目前可用配置也很少。

image.png

所以还是敬请期待1.0或者更高版本发布吧

源码地址在这：vitepress

总结

1. 整个体验过程还是很丝滑，特别是速度，如果写一些文档可以考虑。

2. 待完善的一些功能，需要等，期待它的正式版本发布吧；

3. 可以提个建议就是：如果你对VitePress感兴趣或者想参加开源，我觉得可以去看看，读读源码，提提pr！给简历加1分

说来就来，左手fork 右手git clone...哈哈哈

image.png

备注：

文章所用代码已经上传github

新手小白，难免有跑偏。有不正确的，希望批评指出，感谢你的时间！！

END