[TOC] #### 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)目 ```bash # 初始化項(xiàng)目 pnpm init ``` 第二步：添加 vue、vitepress 為開(kāi)發(fā)時(shí)依賴 ```bash pnpm add vue vitepress -D ``` 第三步：vitepress 設(shè)置向?qū)? ```bash pnpm vitepress init ``` 補(bǔ)充：如果你安裝了 nvm，可以運(yùn)行以下命令指定項(xiàng)目的 node 版本號(hào) ```bash 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)如下所示： | 目錄 | 描述 | | ------------ | ------------ | | docs | Vitepress 站點(diǎn)的項(xiàng)目根目錄 | | .vitepress | Vitepress 配置文件、開(kāi)發(fā)服務(wù)器緩存、構(gòu)建輸出和可選主題自定義代碼的保留位置 | 默認(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)題和描述 ```javascript 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)容 ```javascript { "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 ```