1. 前言

VitePress 官網(wǎng)：https://vitepress.dev

VitePress 是一款靜態(tài)站點(diǎn)生成器，專為構(gòu)建快速、以內(nèi)容為中心的網(wǎng)站而設(shè)計(jì)

目前（2023.12）最新版是 1.0.0-rc.31 候選版，早在 2022 年我就使用過(guò)內(nèi)測(cè)版，候選版和內(nèi)測(cè)版對(duì)比是有不少變化的

2. 安裝

第一步：初始化項(xiàng)目

# 初始化項(xiàng)目
pnpm init

第二步：添加 vue、vitepress 為開(kāi)發(fā)時(shí)依賴

pnpm add vue vitepress -D

第三步：vitepress 設(shè)置向?qū)?

pnpm vitepress init

補(bǔ)充：如果你安裝了 nvm，可以運(yùn)行以下命令指定項(xiàng)目的 node 版本號(hào)

echo v20.10.0 > .nvmrc

3. 文件結(jié)構(gòu)

在構(gòu)建 VitePress 站點(diǎn)時(shí)，【設(shè)置向?qū)А康牡谝豁?xiàng)設(shè)置就是設(shè)定站點(diǎn)目錄，推薦放在 docs 目錄下

假設(shè)設(shè)定 VitePress 項(xiàng)目時(shí)選擇的目錄是 ./docs，生成的文件結(jié)構(gòu)應(yīng)如下所示：

默認(rèn)情況下，Vitepress 將本地運(yùn)行時(shí)生成的文件存儲(chǔ)在 vitepress/cache，打包輸出的文件存儲(chǔ)在 vitepress/dist

如果使用 git，應(yīng)該將它們添加到 .gitignore 中，忽略規(guī)則示例如下：

node_modules
docs/.vitepress/cache
docs/.vitepress/dist

4. 配置文件

配置文件：.vitepress/config.mjs（JavaScript） 或 .vitepress/config.mts（TypeScript）

通過(guò)配置文件可以自定義 Vitepress 站點(diǎn)的各個(gè)方面，最基本的是站點(diǎn)的標(biāo)題和描述

export default defineConfig({
  title: "My Awesome Project",
  description: "A VitePress Site",
})

5. 運(yùn)行腳本

在構(gòu)建 VitePress 站點(diǎn)時(shí)，【設(shè)置向?qū)А恐腥绻(yùn)行 package.json 向添加腳本，默認(rèn)會(huì)添加以下內(nèi)容

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

本地構(gòu)建和測(cè)試

# 運(yùn)行以下命令構(gòu)建文檔
pnpm run docs:build
# 構(gòu)建完成后，可以運(yùn)行以下命令在本地預(yù)覽
pnpm run docs:preview

可以使用 --port 參數(shù)配置使用的端口

{
    "scripts": {
        "docs:dev": "vitepress dev docs --port 8090",
        "docs:preview": "vitepress preview docs --port 8091"
    }
}

6. 版本控制

如果項(xiàng)目要被 git 版本控制，那么以下這些文件應(yīng)被 git 忽略，創(chuàng)建 .gitignore 文件，文件內(nèi)容如下所示

node_modules
# 本地運(yùn)行時(shí)生成的臨時(shí)文件
/docs/.vitepress/cache
# 打包生成的文件
/docs/.vitepress/dist