VitePress是在Vite上构建的静态网站生成器
VitePress is VuePress little brother, built on top of vite.
开始
- 初始化目录及index.md
yarn init
yarn add --dev vitepress
创建文件夹docs，新建index.md (docs/index.md)
- 添加这些脚本到 package.json
{
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
}
- 本地启动服务
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://vitepress.dev/
github: https://github.com/vuejs/vitepress
