VitePress新一代建站工具

VitePress是在Vite上构建的静态网站生成器
VitePress is VuePress little brother, built on top of vite.

开始

1. 初始化目录及index.md

yarn init
yarn add --dev vitepress

创建文件夹docs，新建index.md (docs/index.md)

2. 添加这些脚本到 package.json

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

3. 本地启动服务

yarn docs:dev

image.png

配置

没有配置，页面就很简单，用户没法导航。 在 docs 目录下创建 .vitepress 目录即可开始设置配置

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

.vitepress/config.js 是配置 VitePress 站的必要的文件，其将导出一个 JavaScript 对象：

module.exports = {
  title: 'Hello VitePress',
  description: 'Just playing around.'
}

部署

以下内容有这些共同约定：

你的文档放着项目根目录的 docs 目录
使用默认的打包输出位置 (.vitepress/dist)
VitePress 作为本地依赖安装在项目中，并且已经添加以下脚本

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

构建文档

yarn docs:build # 将构建并存放结果到 `.vitepress/dist`
yarn docs:serve # 预览前面构建的结果，也就是启动一个静态文件服务

也可以更改静态文件服务端口

{
  "scripts": {
    "docs:serve": "vitepress serve docs --port 8080"
  }
}

官网中文文档： https://fttp.jjf-tech.cn/vitepress/
github: https://github.com/vuejs/vitepress