VitePress 可以单独使用，也可以安装到现有项目中。在这两种情况下，都可以使用以下方式安装它：
pnpmnpmyarnyarn (pnp)bun
sh
$ pnpm add -D vitepresssh
$ yarn add -D vitepresssh
$ yarn add -D vitepress vueVitePress 附带一个命令行设置向导，可以帮助你构建一个基本项目。安装后，通过运行以下命令启动向导：
将需要回答几个简单的问题：
md
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./docs
│
◇ Where should VitePress look for your markdown files?
│ ./docs
│
◇ Site title:
│ My Awesome Project
│
◇ Site description:
│ A VitePress Site
│
◇ Theme:
│ Default Theme
│
◇ Use TypeScript for config and theme files?
│ Yes
│
◇ Add VitePress npm scripts to package.json?
│ Yes
│
◇ Add a prefix for VitePress npm scripts?
│ Yes
│
◇ Prefix for VitePress npm scripts:
│ docs
│
└ Done! Now run pnpm run docs:dev and start writing.建议使用如下包管理器安装 vitepress-theme-teek：
pnpmyarnnpm
sh
pnpm install vitepress-theme-teek -Dsh
yarn add vitepress-theme-teek -Dsh
npm install vitepress-theme-teek -D如果想要基于 Teek 二次开发，自定义自己的风格，那么请采用本地安装方式。
Teek 不定期提供新特性或者修复 Bug，如果想要及时享用，那么请采用在线安装方式，届时只需要更新版本即可：
pnpmyarnnpm
sh
pnpm install vitepress-theme-teek@latest -Dsh
yarn add vitepress-theme-teek@latest -Dsh
npm install vitepress-theme-teek@latest -D根据 Vitepress 的要求，需要在 .vitepress/theme/index.ts 文件中引入 Teek 主题。如果没有该路径，需要先创建它。
bash
cd docs\.vitepress
mkdir themets
import Teek from "vitepress-theme-teek";
import "vitepress-theme-teek/index.css";
export default {
extends: Teek,
};然后在 .vitepress/config.ts 文件中引入 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,
// ...
});bash
# 可选
pnpm install @waline/client @giscus/vue artalk -D #安装评论插件
pnpm add -D @mdit-vue/shared #安装 mdit-vue 共享模块,茂茂导航插件需要用
pnpm add -D canvas-confetti # 安装 canvas 五彩纸屑动画库
pnpm add -D nprogress-v2 # 安装 nprogress-v2 进度条插件
pnpm add -D rollup-plugin-visualizer # 安装 rollup 可视化插件
pnpm add -D terser # 安装 terser 代码压缩工具
pnpm add -D vitepress-markdown-timeline # 安装 vitepress 的 markdown 时间线插件
pnpm add -D vitepress-plugin-group-icons # 安装 vitepress 的图标分组插件
pnpm add -D @vueuse/core # 安装 VueUse 工具库
pnpm add -D oh-my-live2d # 安装 oh-my-live2d 看板娘插件
pnpm add -D parallax-js # 安装 parallax-js 视差滚动插件
pnpm add -D vite-plugin-imagemin # 安装 vite 的图片压缩插件
pnpm add -D vue # 安装 Vue 3 框架
pnpm add -D sass #安装sass
pnpm add -D echarts # 安装 ECharts 数据可视化库，用于创建交互式图表
pnpm add -D typescript # 安装 TypeScript，用于编写类型安全的代码
pnpm add vitepress-plugin-rss # 安装 VitePress 插件，用于生成 RSS 订阅
#以下依赖已去除，不在使用导航栏音乐图标，已弃
pnpm add -D element-plus # 安装 ElementPlus 组件库
pnpm add -D @element-plus/icons-vue # 安装 ElementPlus 的 Vue 图标库
pnpm add -D vitepress-plugin-llms # 安装 VitePress 插件，用于支持大语言模型相关功能
pnpm add -D vitepress-plugin-nprogress # 安装 vitepress 的进度条插件该工具还应该将以下 npm 脚本注入到 package.json 中：
package.json
json
{
...
"scripts": {
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
},
...
}docs:dev 脚本将启动具有即时热更新的本地开发服务器。使用以下命令运行它：
除了 npm 脚本，还可以直接调用 VitePress：
pnpmnpmyarnbun
sh
$ pnpm vitepress dev docssh
$ npx vitepress dev docssh
$ yarn vitepress dev docssh
$ bun vitepress dev docs请阅读构建
pnpmnpmyarn
sh
$ pnpm add vitepress-theme-teek@latest -Dsh
$ npm add vitepress-theme-teek@latest -Dsh
$ yarn add vitepress-theme-teek@latest -D此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。