vitepress
简介
一个静态站点生成器，用 Markdown 编写内容，打包构建成 HTML CSS JS，主要用于技术文档站点生成
基于 Vue3 + Vite 生态，可以在 markdown 文档中使用 Vue 组件
快速开始
环境准备
NodeJS 22及以上，NodeJS下载地址
安装 vitepress
- 创建站点文件夹：
vitepress-site - 初始化站点项目：
cd vitepress-site、npm init -y - 安装 vitepress：
npm add -D vitepress - 生成站点项目结构：
npx vitepress init- 选择配置项
- 设置站点配置文件目录：
./site-config - 设置站点 md 文档目录：
./site-mds - 设置站点标题：
Neilson's blog - 设置站点描述：
Neilson 的技术博客 - 设置主题模式：
Default Theme + Customization - 设置主题文件类型为 TypeScript：
Yes - 设置 vitepress npm 脚本命令到 packages.json：
Yes - 设置 vitepress npm 脚本命令前缀：
Yes - 设置 vitepress npm 脚本前缀：
docs
- 设置站点配置文件目录：
- 选择配置项
开发调试
终端执行：npm run docs:dev
安装第三方主题
项目根目录终端执行安装：npm install vitepress-theme-teek -D
在 .vitepress/theme/index.ts 中导入主题：
ts
// .vitepress/theme/index.ts
import Teek from "vitepress-theme-teek";
import "vitepress-theme-teek/index.css";
export default {
extends: Teek,
};在 .vitepress/config.mts 文件中引入 Teek 的配置加载器：
ts
// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";
// Teek 主题配置
const teekConfig = defineTeekConfig({});
// VitePress 配置
export default defineConfig({
extends: teekConfig,
// ...
});