[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 ```  #### 3. 文件结构 --- 在构建 VitePress 站点时，【设置向导】的第一项设置就是设定站点目录，推荐放在 docs 目录下 假设设定 VitePress 项目时选择的目录是 `./docs`，生成的文件结构应如下所示： | 目录 | 描述 | | ------------ | ------------ | | docs | Vitepress 站点的项目根目录 | | .vitepress | Vitepress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的保留位置 | 默认情况下，Vitepress 将本地运行时生成的文件存储在 `vitepress/cache`，打包输出的文件存储在 `vitepress/dist` 如果使用 git，应该将它们添加到 `.gitignore` 中，忽略规则示例如下： ``` 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 向添加脚本，默认会添加以下内容 ```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 ```