VitePress是在Vite上構(gòu)建的靜態(tài)網(wǎng)站生成器
VitePress is VuePress little brother, built on top of vite.
開始
- 初始化目錄及index.md
yarn init
yarn add --dev vitepress
創(chuàng)建文件夾docs吆倦，新建index.md (docs/index.md)
- 添加這些腳本到 package.json
{
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
}
- 本地啟動(dòng)服務(wù)
yarn docs:dev
image.png
配置
沒有配置，頁面就很簡(jiǎn)單坐求，用戶沒法導(dǎo)航蚕泽。 在 docs 目錄下創(chuàng)建 .vitepress 目錄即可開始設(shè)置配置
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ └─ index.md
└─ package.json
.vitepress/config.js 是配置 VitePress 站的必要的文件，其將導(dǎo)出一個(gè) JavaScript 對(duì)象：
module.exports = {
title: 'Hello VitePress',
description: 'Just playing around.'
}
部署
以下內(nèi)容有這些共同約定：
你的文檔放著項(xiàng)目根目錄的 docs 目錄
使用默認(rèn)的打包輸出位置 (.vitepress/dist)
VitePress 作為本地依賴安裝在項(xiàng)目中桥嗤，并且已經(jīng)添加以下腳本
{
"scripts": {
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs"
}
}
構(gòu)建文檔
yarn docs:build # 將構(gòu)建并存放結(jié)果到 `.vitepress/dist`
yarn docs:serve # 預(yù)覽前面構(gòu)建的結(jié)果须妻，也就是啟動(dòng)一個(gè)靜態(tài)文件服務(wù)
也可以更改靜態(tài)文件服務(wù)端口
{
"scripts": {
"docs:serve": "vitepress serve docs --port 8080"
}
}
官網(wǎng)中文文檔： https://vitepress.dev/
github: https://github.com/vuejs/vitepress
