VitePress介绍及使用

VitePress介绍

VitePress是VuePress的小兄弟，建立在Vite和Vue之上的，强大的静态站点生成器。

从根本上说，VuePress v1是一个底层的Webpack应用程序。即使只有两页，它也是一个完整的Webpack项目（包括所有主题源文件）正在编译。当项目有很多页面时，情况会变得更糟——每个页面都必须首先完全编译，然后服务器才能显示任何内容！

Vite 很好地解决了这些问题：几乎即时的服务器启动、仅编译正在服务的页面的按需编译以及闪电般的 HMR。另外，随着时间的推移，在VuePress v1中一些额外的设计问题，也需要大量的重构。

vuepress-next即VuePress v2，这将是VuePress的下一个主要版本。它比VuePress v1做了很多改进，现在也支持Vite。

VitePress 与当前的 VuePress 生态系统（主要是主题和插件）不兼容。总体思路是，VitePress 将拥有一个更精简的主题 API（更喜欢 JavaScript API 而不是文件布局约定）并且可能没有插件（所有自定义都在主题中完成）。

VitePress快速入门

快速入门步骤：

// 创建并进入目录
mkdir vitepress-starter && cd vitepress-starter

// 项目初始化
yarn init

// 添加VitePress和Vue为开发依赖
yarn add --dev vitepress vue

// 创建第一个文档
mkdir docs && echo '#Hello VitePress' > docs/index.md

//添加package.json对应scripts配置：
{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  },
  ...
}

// 启动本地服务
yarn docs:dev

访问地址：http://localhost:5173，即可查看第一个文档页面，如下图所示：

vitepress-01.png

VitePress快速入门地址：
https://vitepress.vuejs.org/guide/getting-started

VitePress配置
VitePress包含三种配置：
App Configs：配置站点的基本属性，如标题，语言、描述等信息；
Theme Config：配置站点的主题，如添加导航、侧边栏，链接等信息；
Frontmatter：该配置可覆盖App Config和Theme Config定义的全局配置。

VitePress目录结构：

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

配置 VitePress 站点的基本文件是.vitepress/config.js，它应该导出一个 JavaScript 对象：

export default {
  title: 'VitePress',
  description: 'Just playing around.'
}

主题配置可以自定义主题。通过向配置文件添加themeConfig来定义主题配置。

export default {
  lang: 'en-US',
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator.',

  // Theme related configurations.
  themeConfig: {
    logo: '/logo.svg',
    nav: [...],
    sidebar: { ... }
  }
}

更多配置参见：
https://vitepress.vuejs.org/guide/configuration

VitePress基础工程
vitepress-starter工程为引入VitePress依赖，并导入VitePress官方文档的基础工程，具体效果如下：

VitePress首页-深色模式

VitePress首页-浅色模式

VitePress Sidebar+右侧导航

可下载vitepress-starter基础工程，基于基础工程快速开发自己的技术文档。

基础工程gitee地址：
https://gitee.com/whwtree/vitepress-starter.git

（完）