[TOC] #### 1. 前言 --- VitePress 官網:<https://vitepress.dev> VitePress 是一款靜態站點生成器,專為構建快速、以內容為中心的網站而設計 目前(2023.12)最新版是 1.0.0-rc.31 候選版,早在 2022 年我就使用過內測版,候選版和內測版對比是有不少變化的 #### 2. 安裝 --- 第一步:初始化項目 ```bash # 初始化項目 pnpm init ``` 第二步:添加 vue、vitepress 為開發時依賴 ```bash pnpm add vue vitepress -D ``` 第三步:vitepress 設置向導 ```bash pnpm vitepress init ``` 補充:如果你安裝了 nvm,可以運行以下命令指定項目的 node 版本號 ```bash echo v20.10.0 > .nvmrc ``` ![](https://img.itqaq.com/art/content/4aca846ef08fc42d1712167c9261d4c7.gif) #### 3. 文件結構 --- 在構建 VitePress 站點時,【設置向導】的第一項設置就是設定站點目錄,推薦放在 docs 目錄下 假設設定 VitePress 項目時選擇的目錄是 `./docs`,生成的文件結構應如下所示: | 目錄 | 描述 | | ------------ | ------------ | | docs | Vitepress 站點的項目根目錄 | | .vitepress | Vitepress 配置文件、開發服務器緩存、構建輸出和可選主題自定義代碼的保留位置 | 默認情況下,Vitepress 將本地運行時生成的文件存儲在 `vitepress/cache`,打包輸出的文件存儲在 `vitepress/dist` 如果使用 git,應該將它們添加到 `.gitignore` 中,忽略規則示例如下: ``` node_modules docs/.vitepress/cache docs/.vitepress/dist ``` ![](https://img.itqaq.com/art/content/b9509afc7dec50a00a18ab266c89004b.png) #### 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 向添加腳本,默認會添加以下內容 ```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` 參數配置使用的端口 ``` { "scripts": { "docs:dev": "vitepress dev docs --port 8090", "docs:preview": "vitepress preview docs --port 8091" } } ``` #### 6. 版本控制 --- 如果項目要被 git 版本控制,那么以下這些文件應被 git 忽略,創建 .gitignore 文件,文件內容如下所示 ``` node_modules # 本地運行時生成的臨時文件 /docs/.vitepress/cache # 打包生成的文件 /docs/.vitepress/dist ```