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

引言

在现代前端开发中，构建静态网站已经成为一种常见的需求。为了满足这一需求，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: 创建并进入一个目录
sh 复制代码
```
$ mkdir vitepress-starter && cd vitepress-starter
```
步骤 2: 初始化
sh 复制代码
```
$ yarn init
```
步骤 3: 本地安装 VitePress
sh 复制代码
```
$ yarn add --dev vitepress
```

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

sh 复制代码

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

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

json 复制代码

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

步骤 6: 在本地服务器上启动文档站点
sh 复制代码
```
$ yarn docs:dev
```

运行后的结果

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

目录结构

1. index.md

md 复制代码

---
layout: home

title: Vite
titleTemplate: Vite Library

hero:
  name: Vite
  text: 下一代的前端工具链
  tagline: 为开发提供极速响应 v4.4.9
  image:
    src: /vite.png
    alt: Vite
  actions:
    - theme: brand
      text: 开始
      link: https://cn.vitejs.dev/guide/
    - theme: alt
      text: 为什么选Vite？
      link: https://cn.vitejs.dev/guide/why.html
    - theme: alt
      text: 在Github上查看
      link: https://github.com/vitejs/vite
    - theme: alt
      text: 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: 完全类型化的API
    details: 灵活的 API 和完整的 TypeScript 类型。
---

/docs/.vitepress/config.js

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 false

  markdown: {
    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 官方中文翻译团队所有，保留所有权利。'
    }
  }
})

如果遇到此报错

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

最终效果图

总结

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