本文主要是介绍一个好用的文档部署工具-VitePress,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
简介
尤大大又出手了,这次他带来了VitePress1.0,一个基于Vite和Vue前端框架构建的静态站点生成器(SSG)。它主要用于快速搭建静态网页项目,尤其适合开发文档较多的场景,同时也支持自定义主题开发官网、博客等项目。
- 内容优先,Markdown 至上
- Vue/VueUse/Pinia/Vite/Vitest 等官方文档,都是基于 VitePress 构建的。
- 官网地址:https://vitepress.dev/zh/guide/getting-started
性能
VitePress 构建时,会为站点创建一个 SSR(服务端渲染)的版本,然后通过虚拟访问每一条路径来渲染对应的 HTML。这种方案的灵感来源于 Nuxt 和 Gatsby 等项目。传统的 SSG 每次导航都会导致页面完全重载,VitePress 的 SSG 会在首次访问时提供静态 HTML,再变成了 SPA(单页应用程序)进行站内的后续导航,包括但不限于:
-
初始加载很快
-
加载完毕后快速切换
-
高效的交互
特性
-
Markdown支持:VitePress支持获取用Markdown编写的内容,并对其进行主题应用,最终生成可以轻松部署的静态HTML页面。
- Vue组件使用:VitePress支持使用Vue组件进行开发,享受Vite的热更新功能。
- 自定义主题:VitePress支持自定义主题,具有标准Vite+Vue应用程序的开发体验。
- 单页应用程序:与许多传统的静态站点生成器不同,VitePress生成的站点实际上是一个单页应用程序(SPA)。对任何页面的初次访问都将是静态HTML,后续页面加载JavaScript,变成Vue SPA单页应用程序。用户在站点内浏览时,不会再次触发整个页面的刷新。
使用步骤
- 安装VitePress:
yarn add --dev vitepress
或
npm i vitepress --save
- 创建项目文件夹:
在你的项目根目录下创建一个放置页面的文件夹,例如,如果你要创建的是文档,那么可以创建一个名为 docs 的文件夹。
- 创建索引文件:
在项目最外层创建一个 index.md 文件。
- 添加脚本命令:
在你的项目根目录下的 package.json 文件中添加如下指令,如
"docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:serve": "vitepress serve docs"
- 启动项目:
yarn docs:dev
或
npm run docs:dev
预览地址 http://localhost:3000/
这篇关于一个好用的文档部署工具-VitePress的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!