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

我心飞翔 分类:javascript

这是我参与更文挑战的第3天,活动详情查看: 更文挑战

前言

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

1.jpg

大概内容是,今年Vue开发者数量还是有比较大的增长,Vue 3 周边库以及开发工具链都已经跟上了如Vuex4.0Vue Router 4.0以及QuasarElement PlusAnd Design VueVuetifyNuxt3等。script setupvolar 结合 ts,使得 SFCtemplate 是有很不错的开发体验,而且计划 Q2 end Vue 3 就会成为主版本;另外已经决定不在支持IE11Vue 2可以迁移到 @vue/compat 或者等 v2.7 版本。

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

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

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

image.png

什么是VitePress及其作用

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

2.jpg

如果你之前用过VuePressHexoGatsby等静态站生成工具,可能很好理解,其实相当于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 渲染成页面的

<meta name="description" content="A VitePress site">
 

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

├─ 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

回复

我来回复
  • 暂无回复内容