安装前的准备工作
- Node.js 18 及以上版本。
- 通过命令行界面 (CLI) 访问 VitePress 的终端。
- 支持 Markdown 语法的编辑器。
- 推荐 VSCode 及其官方 Vue 扩展。
项目安装
VitePress 可以单独使用，也可以安装到现有项目中。在这两种情况下，都可以使用以下方式安装它。
创建文件
可以手动新建一个文件，也可以使用指令。指令：
代码语言：javascript复制# mkdir 创建文件夹指令； && 表示当前命令执行成功后会执行下一条指令。
mkdir vitepress-starter && cd vitepress-starter
初始化文件
（看习惯，如果有该习惯就初始化，没有可跳过）
官网默认使用了 yarn 作为依赖管理工具
代码语言：javascript复制# 用yarn初始化
yarn init
# 用pnpm初始化
pnpm init
# 用npm初始化
npm init
安装依赖
安装项目所需的依赖 vitepress
代码语言：javascript复制# 用yarn
yarn add -D vitepress
# 用pnpm
pnpm add -D vitepress
# 用npm
npm add -D vitepress
如果下载失败，可以使用以下方法：
代码语言：javascript复制npm add --dev vitepress
遇到了 missing peer deps 警告？
如果使用 PNPM，会注意到对 @docsearch/js 的 missing peer deps 警告。这不会影响 VitePress 运行。如果希望禁止显示此警告，请将以下内容添加到 package.json：
代码语言：javascript复制"pnpm": {
"peerDependencyRules": {
"ignoreMissing": [
"@algolia/client-search",
"search-insights"
]
}
}
命令行设置向导
在vitepress官方文档中提到，vitepress附带了一个命令行向导，来帮助构建一个基本的项目。通过运行以下命令启动向导：
代码语言：javascript复制# 用yarn
yarn vitepress init
# 用pnpm
pnpm vitepress init
# 用npm
npx vitepress init
将需要回答几个简单的问题：
代码语言：javascript复制┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./docs
│
◇ Site title:
│ My Awesome Project
│
◇ Site description:
│ A VitePress Site
│
◆ Theme:
│ ● Default Theme (Out of the box, good-looking docs)
│ ○ Default Theme Customization
│ ○ Custom Theme
└
此时文件的目录结构是这样的，如下树状代码所示：
代码语言：javascript复制├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ api-examples.md
│ ├─ markdown-examples.md
│ └─ index.md 入口文件
└─ package.json
打开项目
基本完成了vitepress项目的初始化。运行 pnpm run docs:dev 来打开项目。效果如下:
看到如下界面即表示运行成功
