正式发布:VitePress 1.0 现代化静态站点生成器!

大家好,我是奇兵,今天介绍一下现代化静态站点生成器!,希望能帮到大家。

3 月 21 日, 由 Vue 团队出品的现代化静态站点生成器 VitePress 正式发布 1.0 版本!它专为构建快速、以内容为中心的网站而生,能够轻松地将使用 Markdown 格式撰写的源文件内容转化为静态 HTML 页面,支持部署到任何平台。

图片

VitePress 基于 Vite 和 Vue 构建,是 VuePress 的精神继承者和现代替代品。

使用场景

  • 文档编写:VitePress 自带专为技术文档打造的默认主题,为 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等项目的文档提供了支持。Vue.js 的官方文档也基于 VitePress 构建,并通过自定义主题实现多语言版本的无缝切换。

  • 博客、作品集与营销网站:VitePress支持完全自定义的主题,并具备标准Vite + Vue应用程序的开发体验。由于基于 Vite 构建,还可以轻松利用 Vite 生态中的各类插件。更值得一提的是,VitePress提供了灵活的 API,支持本地或远程数据加载,并在构建阶段动态生成路由。只要数据在构建时是确定的,几乎可以用 VitePress 来构建任何类型的网站。

开发者体验

VitePress 旨在为处理 Markdown 内容提供出色的开发者体验。

  • Vite 驱动:实现秒速启动服务器,每次编辑都能实时反映在页面上(<100ms),无需重新加载页面。

  • 内置 Markdown 扩展:前置数据、表格、语法高亮等一应俱全,满足多样化的文档编写需求。特别是针对代码块的处理,VitePress 提供了众多高级特性,使其成为技术文档编写的理想选择。

  • Vue 增强的 Markdown:借助 Vue 模板与 HTML 的完美兼容,每个 Markdown 页面都能成为 Vue 单文件组件。这意味着可以利用 Vue 的模板特性或导入的组件,为静态内容增添丰富的交互性,提升用户体验。

性能

与许多传统 SSG(静态站点生成器)不同,VitePress 生成的网站在首次访问时提供静态 HTML,但在网站内部进行后续导航时,它会变成一个单页应用程序(SPA)。这种模型为性能提供了最佳平衡:

  • 快速初始加载: 首次访问任何页面时,都会提供静态的、预渲染的 HTML,以加快加载速度和优化 SEO。然后页面会加载一个 JavaScript 包,将页面转换为 Vue SPA(即“水合作用”)。与大家对 SPA 水合作用通常的缓慢假设相反,由于 Vue 3 的原始性能和编译器优化,这一过程实际上非常快。典型的 VitePress 网站在 PageSpeed Insights 中即使在低端移动设备和慢速网络环境下也能获得接近完美的性能评分。

  • 快速加载后导航: 更重要的是,SPA 模型在初始加载后为用户提供了更好的体验。在网站内部进行后续导航时,不再需要整个页面重新加载。相反,会获取目标页面的内容并进行动态更新。VitePress 还会自动为视口内的链接预取页面块。在大多数情况下,加载后的导航会感觉非常快。

  • 无缝的交互体验: 为了能够水合静态 Markdown 中嵌入的动态 Vue 部分,每个 Markdown 页面都被视为一个 Vue 组件并编译成 JavaScript。这听起来可能效率不高,但 Vue 编译器足够智能,能够分离静态和动态部分,从而最小化水合成本和有效载荷大小。对于初始页面加载,静态部分会自动从 JavaScript 有效载荷中消除,并在水合过程中跳过。

VitePress 官网:https://vitepress.dev/

喜欢的话点点赞收藏一下谢谢

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/770408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

伦敦银是什么?揭开其神秘面纱

伦敦银它不仅是全球最大的白银交易市场&#xff0c;更是全球白银价格走势的重要基准。伦敦银最初起源于历史悠久的伦敦金银市场&#xff0c;这里聚集了众多国际金融机构和大型交易商&#xff0c;形成了一个庞大且规范的白银交易网络。以下小编将从几个方面带大家快速认识伦敦银…

Apache Spark

一、Apache Spark 1、Spark简介 Apache Spark是用于大规模数据 (large-scala data) 处理的统一 (unified) 分析引擎。 Spark官网 Spark最早源于一篇论文Resilient Distributed Datasets: A Fault-Tolerant Abstraction for In-Memory Cluster Computing,该论文是由加州大学柏…

ffmpeg把一个平面视频,做成左右平面视频

要使用FFmpeg将单个平面视频转换为左右&#xff08;或称为并排&#xff09;3D格式的视频&#xff0c;你可以使用FFmpeg的filter_complex功能来实现。这种类型的视频通常用于3D视觉效果&#xff0c;其中同一画面的两个版本并排放置&#xff0c;每个版本略有不同的视角&#xff0…

C# 将 Word 转文本存储到数据库并进行管理

目录 前言 1. 创建数据库表格 2. 安装必需的 NuGet 包 3. 转换 Word 文档为文本 4. 将文本存储到数据库 5. 完整示例 前言 C# 是一种通用的编程语言&#xff0c;可以用于开发各种类型的应用程序&#xff0c;包括处理文本和数据库管理。在这篇文章中&#xff0c;我将向您…

ADB 操作命令详解及用法大全

ADB&#xff08;Android Debug Bridge&#xff09;是用于在计算机和 Android 设备之间进行通信的命令行工具。它可以用于调试和测试 Android 应用程序&#xff0c;以及在计算机上执行各种操作。 以下是一些常用的 ADB 命令及其用法&#xff1a; adb devices 用途&#xff1a;列…

WPF 界面命令绑定(MVVM结构)

1.创建模型数据类&#xff08;M&#xff09; /// <summary>/// 数据模型/// </summary>public class LoginDataModel{// 用户名private string _userName;public string UserName{get { return _userName; }set{_userName value;}}// 密码private string _passWor…

问卷调查数据分析指南!掌握方法,精准把握用户需求!

“我们可以用自定义报表、交叉报表、自定义过滤器等放方式进行问卷调查数据分析。“ 问卷调查的过程中&#xff0c;问卷设计、问卷分发、问卷收集可能都不是让我们最头疼的。经过几天的奋战&#xff0c;终于拿到了数据&#xff0c;但是问题也随之而来。收集上来的问卷信息&…

linux操作系统——线程控制+线程封装

1.理解用户级线程 我们前面用到的所有跟线程有关的接口全部都不是系统直接提供的接口&#xff0c;而是原生线程库pthread提供的接口。我们前面谈到了由于用户只认线程&#xff0c;而linux操作系统是通过用轻量级进程模拟线程&#xff0c;并不是真正的线程&#xff0c;所以linu…

C# for/foreach 循环

一个 for 循环是一个允许您编写一个执行特定次数的循环的重复控制结构。 语法 C# 中 for 循环的语法&#xff1a; for ( init; condition; increment ) {statement(s); } 下面是 for 循环的控制流&#xff1a; init 会首先被执行&#xff0c;且只会执行一次。这一步允许您声…

【数据结构】非线性结构——二叉树

文章目录 前言1.树型结构1.1树的概念1.2树的特性1.3树的一些性质1.4树的一些表示形式1.5树的应用2.二叉树 2.1 概念2.2 两种特殊的二叉树2.3 二叉树的性质2.4 二叉树的存储2.5 二叉树的基本操作 前言 前面我们都是学的线性结构的数据结构&#xff0c;接下来我们就需要来学习非…

kubernetes- ingress-gateway-istio_gateway的区别

Kubernetes Ingress, Gateway, 和 Istio Gateway 的区别 Kubernetes Ingress: Kubernetes Ingress 是一个资源对象&#xff0c;用于控制进入 Kubernetes 集群的流量。它可以配置外部 IP 地址、端口、域名、以及路径等信息&#xff0c;将流量路由到不同的服务。Ingress 通常使…

Stable Diffusion 进阶教程 - 二次开发(制作您的文生图应用)

目录 1. 引言 2. 基于Rest API 开发 2.1 前置条件 2.2 代码实现 2.3 效果演示 2.4 常见错误 3. 总结 1. 引言 Stable Diffusion作为一种强大的文本到图像生成模型&#xff0c;已经在艺术、设计和创意领域引起了广泛的关注和应用。然而&#xff0c;对于许多开发者来说&#xff…

数据结构奇妙旅程之深入解析冒泡排序

冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法&#xff0c;它重复地遍历要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换&#xff0c;也就是说该数列已经排序完成…

数据结构奇妙旅程之六大排序算法

Java 中的六大排序算法包括&#xff1a;冒泡排序&#xff08;Bubble Sort&#xff09;、选择排序&#xff08;Selection Sort&#xff09;、插入排序&#xff08;Insertion Sort&#xff09;、希尔排序&#xff08;Shell Sort&#xff09;、归并排序&#xff08;Merge Sort&…

299.【华为OD机试】免单统计(时间字符串排序—JavaPythonC++JS实现)

本文收录于专栏:算法之翼 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解代码C/C++题解代码JS题解代码四.代码讲解(Ja…

iOS开发进阶(九):OC混合开发嵌套H5应用并互相通信

文章目录 一、前言二、嵌套H5应用并实现双方通信2.1 WKWebView 与JS 原生交互2.1.1 H5页面嵌套2.1.2 常用代理方法2.1.3 OC调用JS方法2.1.4 JS调用OC方法 2.2 JSCore 实现原生与H5交互2.2.1 OC调用H5方法并传参2.2.2 H5给OC传参 2.3 UIWebView的基本用法2.3.1 H5页面嵌套2.3.2 …

前端埋点解决方案

一、前言&#xff1a;基于神策数据的前端埋点解决方案 JavaScript 快速使用 神策分析使用手册[预览版] 二、sdk gitlab下载地址 https://github.com/sensorsdata/sa-sdk-javascript/releases 或者npm 安装 npm i sa-sdk-javascript 三、入门 3.1 接入sdk 以及配置 (ver…

Spring Boot | SpringBoo“开发入门“

目录 : 1.SpringBoot的“介绍”SpringBoot”概述” &#xff1a;SpringBoot”简介“SpringBoot的“优点” 2. SpringBoot入门程序环境准备使用 “Maven”方式构建SpringBoot 项目使用“Spring Initializr”方式构建Spring Boot 项目 3. “单元测试” 和“热部署”单元测试热部署…

JVM的垃圾回收算法--有哪些垃圾回收算法?哪些垃圾收集器?

三大假说 弱分代假说&#xff08;Weak Generational Hypothesis&#xff09;&#xff1a;绝大多数对象都是朝生夕灭的。强分代假说&#xff08;Strong Generational Hypothesis&#xff09;&#xff1a;熬过越多次垃圾收集过程的对象就越难以消亡。跨代引用假说&#xff08;In…

uniapp打包小程序,使用$refs报错解决办法

uniapp打包字节抖音小程序使用$refs报错解决办法 在小程序开过程中&#xff0c;使用uniapp时&#xff0c;作为开发者&#xff0c;我们习惯以vue的语法进行开发&#xff0c;希望通过使用$refs进行元素的操作&#xff0c;但是开发小程序时这种方法却失效了。 原因&#xff1a;微…