快速开始
本指南将帮助你快速搭建 VitePress 项目。
环境准备
- Node.js 16 或更高版本
- 包管理器：npm、yarn 或 pnpm
安装
方式一：全局安装
bash
npm install -g vitepress
1
方式二：项目内安装
bash
npm init
npm install -D vitepress
1
2
2
创建项目
bash
# 初始化项目
npm init vitepress@latest my-site
# 进入项目目录
cd my-site
# 安装依赖
npm install
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
项目结构
my-site/
├── docs/
│ ├── .vitepress/
│ │ └── config.ts # 配置文件
│ ├── index.md # 首页
│ ├── guide/
│ │ └── index.md # 指南页面
│ └── tools/
│ └── index.md # 工具页面
├── package.json
└── README.md
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
常用命令
bash
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产版本
npm run serve
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
编写内容
在 docs 目录下创建 .md 文件即可：
markdown
# 我的页面
这是一个 Markdown 文件。
## 二级标题
- 列表项 1
- 列表项 2
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
配置站点
编辑 docs/.vitepress/config.ts 文件：
typescript
import { defineConfig } from 'vitepress'
export default defineConfig({
title: '我的网站',
description: '一个简洁的个人门户',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '指南', link: '/guide/' }
]
}
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12