[TOC] #### 1. 前言 --- VitePress 官網(wǎng)：<https://vitepress.dev> VitePress 是一款靜態(tài)站點生成器，專為構建快速、以內(nèi)容為中心的網(wǎng)站而設計 目前（2023.12）最新版是 1.0.0-rc.31 候選版，早在 2022 年我就使用過內(nèi)測版，候選版和內(nèi)測版對比是有不少變化的 #### 2. 安裝 --- 第一步：初始化項目 ```bash # 初始化項目 pnpm init ``` 第二步：添加 vue、vitepress 為開發(fā)時依賴 ```bash pnpm add vue vitepress -D ``` 第三步：vitepress 設置向導 ```bash pnpm vitepress init ``` 補充：如果你安裝了 nvm，可以運行以下命令指定項目的 node 版本號 ```bash echo v20.10.0 > .nvmrc ```  #### 3. 文件結構 --- 在構建 VitePress 站點時，【設置向導】的第一項設置就是設定站點目錄，推薦放在 docs 目錄下 假設設定 VitePress 項目時選擇的目錄是 `./docs`，生成的文件結構應如下所示： | 目錄 | 描述 | | ------------ | ------------ | | docs | Vitepress 站點的項目根目錄 | | .vitepress | Vitepress 配置文件、開發(fā)服務器緩存、構建輸出和可選主題自定義代碼的保留位置 | 默認情況下，Vitepress 將本地運行時生成的文件存儲在 `vitepress/cache`，打包輸出的文件存儲在 `vitepress/dist` 如果使用 git，應該將它們添加到 `.gitignore` 中，忽略規(guī)則示例如下： ``` node_modules docs/.vitepress/cache docs/.vitepress/dist ```  #### 4. 配置文件 --- 配置文件：.vitepress/config.mjs（JavaScript） 或 .vitepress/config.mts（TypeScript） 通過配置文件可以自定義 Vitepress 站點的各個方面，最基本的是站點的標題和描述 ```javascript export default defineConfig({ title: "My Awesome Project", description: "A VitePress Site", }) ``` #### 5. 運行腳本 --- 在構建 VitePress 站點時，【設置向導】中如果運行 package.json 向添加腳本，默認會添加以下內(nèi)容 ```javascript { "scripts": { "docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:preview": "vitepress preview docs" } } ``` 本地構建和測試 ``` # 運行以下命令構建文檔 pnpm run docs:build # 構建完成后，可以運行以下命令在本地預覽 pnpm run docs:preview ``` 可以使用 `--port` 參數(shù)配置使用的端口 ``` { "scripts": { "docs:dev": "vitepress dev docs --port 8090", "docs:preview": "vitepress preview docs --port 8091" } } ``` #### 6. 版本控制 --- 如果項目要被 git 版本控制，那么以下這些文件應被 git 忽略，創(chuàng)建 .gitignore 文件，文件內(nèi)容如下所示 ``` node_modules # 本地運行時生成的臨時文件 /docs/.vitepress/cache # 打包生成的文件 /docs/.vitepress/dist ```