我报名参加金石方案1期应战——瓜分10万奖池，这是我的榜首篇文章，点击检查活动概况

✨ 前语

前阵子把自己的技能网站从vuepress升级到了vitepress，在看文档时发现 vitepress 没有中文文档，于是乎就做了一个中文文档的版别，便利自己翻阅文档，也为后续研讨vitepress源码做准备。现在全新的vitepress中文文档已发布，快点击加收藏检查吧：

vitepress 中文文档 。

文档仓库

什么是vitepress

VitePress 是根据vite的vuepress兄弟版。特别适合写博客网站，技能文档，面试题网站，就有着它先天的优势。根本上现在vue官方团队的网站也都运用了vitepress，例如vuejs、vitejs、Vitest、vueuse…哦，还有vitepress官网自己。

不仅如此，它还有极易上手、构建速度快、开发体检佳等优点。而且，它开箱即用，现在正处于 alpha 阶段，装备和 API 可能会在小版别之间发生变化。

相比vuepress的改善点

构建

这个结果清楚明了，运用vite能够带来：

  • 更快的本地服务启动
  • 更快的热更新
  • 更快的打包（内部运用Rollup）

更小的页面体积

vitepress运用了vue3，根据Vue3的tree-shaking + Rollup 代码拆分达到了打包体积更小的作用

  • 每个页面的每个请求不会发送元数据。 这将页面权重与页面总数别离。仅返回当前页面的元数据。客户端导航将同时获取新页面的组件和元数据。

  • 不运用 vue-router，因为 VitePress 的需求十分简单和具体 – 运用简单的自定义router（200行以下代码）替代。

装备

VitePress 旨在削减当前 VuePress 的复杂性，并从其极简主义本源重新开端。

新特性

布局

vitepress内置了包括doc、home、page的文档布局，

如果你不想要任何布局，你能够经过frontmatter传递layout: false。如果您想要一个完全可定制的登录页面(默许情况下没有任何侧边栏、导航栏或页脚)，这个选项很有用。

主题

VitePress 带有默许主题，并提供许多开箱即用的功用。主题涵盖了导航栏、侧边栏、上下页按钮、编辑链接、最近更新日期、列表、搜索、团队组件等多个功用。

运用自定义主题

你能够经过增加.vitepress/theme/index.ts文件（“主题入口文件”）来启用自定义主题。

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

VitePress 自定义主题是一个只包括四个属性的对象，定义如下：

interface Theme {
  Layout: Component // Vue 3 component
  NotFound?: Component
  enhanceApp?: (ctx: EnhanceAppContext) => void
  setup?: () => void
}

主题入口文件应将主题作为其默许导出：

// .vitepress/theme/index.js
import Layout from './Layout.vue'
export default {
  Layout,
  NotFound: () => 'custom 404',
}

Layout组件如下所示：

<!-- .vitepress/theme/Layout.vue -->
<template>
  <h1>Custom Layout!</h1>
  <!-- Content便是markdown烘托的方位 -->
  <Content />
</template>

默许导出是自定义主题的仅有方法。 在自定义主题中，它就像一般的 Vite + Vue 3 应用程序一样作业。

扩展默许主题

如果想扩展和自定义默许主题，能够从vitepress/theme导入它并在导出自定义主题中对其进行扩展。 以下是一些常见自定义的示例：

注册大局组件

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // 注册一个大局组件
    app.component('MyGlobalComponent', /* ... */)
  }
}

因为我们运用 Vite，你还能够利用 Vite 的大局导入特性主动注册组件目录。

自定义 CSS

默许主题 CSS 可经过覆盖根元素的 CSS 变量进行自定义：

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import './custom.css'
export default DefaultTheme

/* .vitepress/theme/custom.css */
:root {
  --vp-c-brand: #646cff;
  --vp-c-brand-light: #747bff;
}

这里能够看到支撑的 默许的主题 CSS 变量.

Layout 组件插槽

默许主题<Layout/>组件有一些插槽，可用于在页面的某些方位注入内容。具体能够点击检查

还有主题颜色，支撑亮/暗黑主题，例如下面这个好看的暗黑主题。

vitepress 中文文档

布置

执行 build 后默许会在(.vitepress/dist)生成构建的产品，然后就能够开端布置到服务器上了。

vitepress 官网提供了 github page 、gitlab page、firebase等多个服务器的布置方法。推荐运用github page，提供了github action的示例代码，根本一步到位。

我个人的文档网站就发布在github page，运用action主动布置，还不清楚怎样用github action主动布置自己的文档网站的能够看我之前的文章：用GitHub Action + VuePress主动化布置自己的文档网站。

怎样做贡献

现在vitepress还处在aplha阶段，更新比较频频，而且现在还没有国际化的支撑，想必很多人都会想为开源做贡献，这不便是一个很好的时机吗。