VitePress搭建Vite官方中文文档首页

✨专栏介绍

在当今数字化时代，Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序，就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术，以及各种框架、库和工具。在本专栏中，我们将深入学习前端技术的各个方面。我们将学习如何使用HTML构建语义化的网页结构，如何使用CSS进行样式设计和布局，以及如何使用JavaScript实现交互功能和动态效果。此外，我们还将介绍各种流行的前端框架和库，并学习如何使用它们来提高开发效率和用户体验。通过学习这些内容，你将能够成为一名熟练的前端开发者，并能够应用这些知识来构建出现代化且高质量的Web应用程序。让我们一起开始前端技术的学习之旅吧！

在这里插入图片描述

文章目录

    • ✨专栏介绍
    • 引言
    • 什么是VitePress?
    • 对比VuePress
    • 示例
      • 1. 根据官网快速上手步骤新建项目并运行
      • 2. 现在我们用这个初始化的项目弄一个简单的[Vite官方中文文档首页](https://cn.vitejs.dev/)
    • 总结
    • 😶 写在结尾

引言

在现代前端开发中，构建静态网站已经成为一种常见的需求。为了满足这一需求，Vue.js社区推出了一个名为VitePress的静态网站生成器。VitePress是基于Vue.js和Vite构建工具的静态网站生成器，它提供了一种简单、快速和高效的方式来构建静态网站。本文将使用VitePress搭建简单的Vite官方中文文档首页。

什么是VitePress?

VitePress 是早期的 WIP！目前的重点首先是让 Vite 稳定和功能完善。目前，不推荐将其用于任何正式的场景。
VitePress 是 VuePress 小兄弟, 基于 Vite构建。

VitePress是一个基于Vue.js和Vite构建工具的静态网站生成器。它允许开发者使用Markdown编写文档，并将其转换为静态HTML页面。与传统的静态网站生成器相比，VitePress具有更快的启动时间和热重载功能，这使得开发者可以更快地预览和调试他们的文档。

对比VuePress

1. 构建速度：VitePress利用了Vite构建工具的优势，可以实现秒级冷启动和热重载。这意味着在开发过程中，你可以立即看到修改后的效果，提高了开发效率。

2. 插件系统：VitePress采用了Vue3的插件系统，使得扩展功能变得更加简单。你可以通过编写插件来扩展VitePress的功能，并且可以在Markdown中使用Vue组件。

3. 配置简单：Vitepress采用了约定大于配置的原则，大部分情况下你不需要进行复杂的配置即可开始使用。如果需要自定义配置，你只需要创建一个.vitepress目录，并在其中创建一个config.js文件即可。

示例

1. 根据官网快速上手步骤新建项目并运行

从头开始搭建一个简单的 VitePress 文档站点。如果你已经有了一个存在的项目并且向在项目中维护文档，你可以从步骤 3 开始。

  • 步骤 1: 创建并进入一个目录

    $ mkdir vitepress-starter && cd vitepress-starter

  • 步骤 2: 初始化

    $ yarn init

  • 步骤 3: 本地安装 VitePress

    $ yarn add --dev vitepress

  • 步骤 4: 创建你第一篇文档

    $ mkdir docs && echo '# Hello VitePress' > docs/index.md

  • 步骤 5: 在 package.json.添加一些script

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

  • 步骤 6: 在本地服务器上启动文档站点

    $ yarn docs:dev

运行后的结果

在这里插入图片描述

2. 现在我们用这个初始化的项目弄一个简单的Vite官方中文文档首页

目录结构

在这里插入图片描述

1. index.md

---
layout: hometitle: Vite
titleTemplate: Vite Libraryhero:name: Vitetext: 下一代的前端工具链tagline: 为开发提供极速响应 v4.4.9image:src: /vite.pngalt: Viteactions:- theme: brandtext: 开始link: https://cn.vitejs.dev/guide/- theme: alttext: 为什么选Vite？link: https://cn.vitejs.dev/guide/why.html- theme: alttext: 在Github上查看link: https://github.com/vitejs/vite- theme: alttext: ViteConf 23!link: https://viteconf.org/23/
features:- icon: 💡title: 极速的服务启动details: 使用原生 ESM 文件，无需打包!- icon: ⚡️title: 轻量快速的热重载details: 无论应用程序大小如何，都始终极快的模块热替换（HMR）- icon: 🛠️title: 丰富的功能details: 对 TypeScript、JSX、CSS 等支持开箱即用。- icon: 📦title: 优化的构建details: 可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建- icon: 🔩title: 通用的插件details: 在开发和构建之间共享 Rollup-superset 插件接口。- icon: 🔑title: 完全类型化的APIdetails: 灵活的 API 和完整的 TypeScript 类型。
---
  1. /docs/.vitepress/config.js
import { defineConfig } from 'vitepress'export default defineConfig({title: `Vite 官方中文文档`,description: 'Vite 官方中文文档',base: '/vite/',head: [['link',{rel: 'icon',href: 'https://cn.vitejs.dev/viteconf.svg'}]],appearance: true, // 默认 true，设为 false 则无法切换dark/light主题，可选 'dark' true falsemarkdown: {lineNumbers: false // 是否显示行数，默认false},themeConfig: {logo: '/vite.png',socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }// { icon: 'twitter', link: '...' },],search: {provider: 'local'},nav: [{ text: '指引', link: '/guide' },{ text: '配置', link: '/config' },{ text: '插件', link: '/plugin' },{text: '相关链接',items: [{ text: 'Vite v3文档', link: 'https://v3.vitejs.dev/' },{ text: 'Vite v3文档', link: 'https://v2.vitejs.dev/' }]}],footer: {message: '本中文文档内容版权为 Vite 官方中文翻译团队所有，保留所有权利。'}}
})

如果遇到此报错

image.png

在package.json中加上"type": "module"即可

最终效果图

在这里插入图片描述

总结

Vitepress是一个简单、快速和高效的静态网站生成器，它基于Vue.js和Vite构建工具。相较于Vuepress，Vitepress在性能和开发体验方面做出了一些优化。通过使用Vitepress，开发者可以更快速地构建静态网站，并享受到更好的开发体验。希望本文能够帮助你深入了解Vitepress，并在实际项目中应用它。

😶 写在结尾

前端设计模式专栏
在这里插入图片描述
设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏
在这里插入图片描述
Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏在这里插入图片描述
JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏

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

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

相关文章

FinGPT——金融领域开源大模型

FinGPT——金融领域开源大模型

文章目录 背景论文摘要相关工作大型语言模型（LLMs）和ChatGPT金融领域的LLMs为什么需要开源的金融LLMs？ 以数据为中心的方法用于FinLLMs金融数据和独特特性应对处理金融数据的挑战 FINGPT 概述：FINLLM 的开源框架数据来源面向金融N…
阅读更多...
【常用排序算法】冒泡排序

【常用排序算法】冒泡排序

冒泡排序 冒泡排序基本思想：N 个数的数组，经过N-1轮排序。 升序 大的值下沉，小的值上浮。降序 小的值下沉，小的字上浮 import java.util.Arrays; public class BubbleSort {public static void main(String[] args) {int[] values…
阅读更多...
Git 对项目更新的时候提示错误 repository not owned by current user

Git 对项目更新的时候提示错误 repository not owned by current user

遇到 Git 提示的错误信息为：repository not owned by current user 上图显示的是错误的信息。 问题和解决 出现上面错误信息的原因是当前文件夹的权限和 Git 的执行权限不一直导致的。 我们的问题是我们希望在网盘上使用 Git 更新克隆后的代码，但登录…
阅读更多...
React Hook 原理，及如何使用Hook

React Hook 原理，及如何使用Hook

一、 Hook使用规则 只在最顶层使用Hook 不要在循环，条件或嵌套函数中调用Hook； 只在组件函数和自定义hook中调用Hook Q1 ： 为什么 hook 不能 在循环，条件或嵌套函数中调用Hook ？ A1： 因为这跟React的…
阅读更多...
使用Kafka与Spark Streaming进行流数据集成

使用Kafka与Spark Streaming进行流数据集成

在当今的大数据时代，实时数据处理和分析已经变得至关重要。为了实现实时数据集成和分析，组合使用Apache Kafka和Apache Spark Streaming是一种常见的做法。本文将深入探讨如何使用Kafka与Spark Streaming进行流数据集成，以及如何构建强大的实…
阅读更多...
【智慧地球】星图地球 | 星图地球超算数据工场

【智慧地球】星图地球 | 星图地球超算数据工场

当前空天信息处理涉及并发并行的大量计算问题，需要高性能计算、智能计算联合调度，以此来实现多算力融合；而我国算力产业规模快速增长，超算算力资源正需要以任务驱动来统筹。 基于此，中科星图与郑州中心展开紧密合作&a…
阅读更多...
从0开始python学习-39.requsts库

从0开始python学习-39.requsts库

目录 HTTP协议 1. 请求 2. 响应 Requests库 1. 安装 2. 请求方式 2.1 requests.请求方式(参数) 2.2 requests.request() 2.3 requests.session().request() 2.4 三种方式之间的关联 3. 请求参数 3.1 params：查询字符串参数 3.2 data：Form表单…
阅读更多...
【Python可视化实战】钻石数据可视化

【Python可视化实战】钻石数据可视化

一、项目引言 1.背景和目标 钻石作为一种珍贵的宝石，其价格受到多种因素的影响。为了深入了解钻石价格的决定因素，我们收集了大量关于钻石的数据，并希望通过数据可视化来揭示钻石特征与价格之间的关系。 2.内容 收集钻石的各项特征数据&a…
阅读更多...
【大数据】分布式协调系统 Zookeeper

【大数据】分布式协调系统 Zookeeper

分布式协调系统 Zookeeper 1.Zookeeper 的特点2.Zookeeper 的数据结构3.Zookeeper 的应用场景3.1 统一命名服务3.2 统一配置管理3.3 统一集群管理3.4 服务器动态上下线3.5 软负载均衡 Zookeeper 是 Apache 开源的一个顶级项目，目的是为分布式应用提供协调服务&#…
阅读更多...
IO进程线程 day4

IO进程线程 day4

进程状态间的转化 创建出三个进程完成两个文件之间拷贝工作&#xff0c;子进程1拷贝前一半内容&#xff0c;子进程2拷贝后一半内容&#xff0c;父进程回收子进程的资源 #include <head.h> int main(int argc, const char *argv[]) {FILE *fp1NULL,*fp2NULL;//定义两个文…
阅读更多...
【Java基础篇】常见的字符编码、以及它们的区别

【Java基础篇】常见的字符编码、以及它们的区别

常见的字符编码、以及它们的区别 ✔️ 解析✔️扩展知识仓✔️Unicode和UTF-8有啥关系?✔️有了UTF-8&#xff0c;为什么要出现GBK✔️为什么会出现乱码 ✔️ 解析 就像电报只能发出 ”滴” 和 ”答” 声一样&#xff0c;计算机只认识 0 和 1 两种字符&#xff0c;但是&#x…
阅读更多...
【驱动序列】C#获取电脑硬件基本组合以及基础信息

【驱动序列】C#获取电脑硬件基本组合以及基础信息

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读《小5讲堂之知识点实践序列》文章。 这是2024年第7篇文章&#xff0c;此篇文章是C#知识点实践序列文章&#xff0c;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 要开发一款驱动小助手&…
阅读更多...
vue封装基础input组件（添加防抖功能）

vue封装基础input组件（添加防抖功能）

先看一下效果&#xff1a; // 调用页面 <template><div><!-- v-model&#xff1a;伪双向绑定 --><my-input v-model"inputVal" label"姓名" type"textarea" /></div> </template><script> import…
阅读更多...
第3章 【例题】（完整版）

第3章 【例题】（完整版）

目录 前言 【例3.1】有关成绩结构体的例子 【例3.2】使用Score类的完整程序 【例 3.3】一个存在错误的程序 【例3.4】用对象赋值语句的例子 【例3.5】为类Score定义一个构造函数 【例3.6】建立对象的同时&#xff0c;用构造函数给数据成员赋初值 【例3.7】用成员初始…
阅读更多...
【Spark精讲】Spark on Hive性能优化

【Spark精讲】Spark on Hive性能优化

目录 第一章 1.1 集群配置概述 1.2 集群规划概述 第二章 Yarn配置 2.1 Yarn配置说明 yarn.nodemanager.resource.memory-mb yarn.nodemanager.resource.cpu-vcores yarn.scheduler.maximum-allocation-mb yarn.scheduler.minimum-allocation-mb 第三章 Spark的配置说…
阅读更多...
Vue3中配置env环境变量

Vue3中配置env环境变量

什么时候会用到这个呢&#xff0c;比如我们的后端开发有多名&#xff0c;很多时候需要切换调用不同人的接口地址&#xff0c;或者在打包的时候&#xff0c;需要指定环境中的后台接口地址&#xff0c;那么我们频繁修改代码&#xff0c;就很麻烦&#xff0c;这个时候&#xff0c;…
阅读更多...
burpsuite模块介绍之项目选项

burpsuite模块介绍之项目选项

使用该模块中的功能实现对token的爆破 靶场搭建：phpstudy的安装与靶场搭建 - junlin623 - 博客园 (cnblogs.com) 实现 1）先抓个包 2）设置宏 要实现我们爆破的时候请求的token也跟靶场一样一次一换从而实现爆破，那就需要用到项目选项中的宏（预编译功能）
阅读更多...
MathType2024MAC苹果电脑版本下载安装图文教程

MathType2024MAC苹果电脑版本下载安装图文教程

在数学和科学的世界里&#xff0c;表达精确的方程式和化学公式是至关重要的。MathType作为一款及其优秀且有全球影响力的数学公式编辑器&#xff0c;让这一切变得触手可及。MathType Mac版已全新升级&#xff0c;作为Microsoft Word和PowerPoint的Add-In插件&#xff0c;为您的…
阅读更多...
Js的String的replace(和replaceAll(

Js的String的replace(和replaceAll(

EcmaJavascriptJs的String的 replace( 和 replaceAll( 方法 String.prototype.replaceString.prototype.replaceAll 相同点 都是String.prototype的函数都是用于字符串替换都是两个参数第一个参数都可以是正则或字符串第二参数都可以是字符串或者回调函数, 回调会传入一个参…
阅读更多...
如何选择合适的语音呼叫中心？

如何选择合适的语音呼叫中心？

市场上不同的语音呼叫中心提供商&#xff0c;都有其独特的优势和不足。企业在选择语音呼叫中心服务公司时&#xff0c;主要考虑以下因素&#xff1a;服务质量、价格、技术支持、客户支持等。 首先&#xff0c;服务质量是选择语音呼叫中心需关注的最重要因素之一。 为确保语音…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023