快速上手

注意

VuePress v2 目前仍处于 RC (Release Candidate) 阶段。你已经可以用它来构建你的站点，但是它的配置和 API 还不够稳定，有可能会发生一些微小的 Breaking Changes 。因此，在每次更新 RC 版本之后，请一定要仔细阅读 更新日志。

在线试一试

你可以通过 StackBlitz 在你的浏览器里直接使用 VuePress 。

安装

依赖环境

• Node.js v18.16.0+
• 包管理器，如 pnpm、yarn、npm 等。

提示

• 使用 pnpm 时，你需要安装 vue 作为 peer-dependencies 。
• 使用 yarn 2+ 时，你需要在 .yarnrc.yml 文件中设置 nodeLinker: 'node-modules' 。

创建项目

通过命令行创建

你可以通过 create-vuepress 直接创建项目模板。

手动创建

这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。

• 创建并进入一个新目录

mkdir vuepress-starter
cd vuepress-starter

• 初始化项目

@tab:active pnpm

git init
pnpm init

@tab yarn

git init
yarn init

@tab pnpm

git init
npm init

:::

• 安装 VuePress

pnpm

# 安装 vuepress 和 vue
pnpm add -D vuepress@next vue
# 安装打包工具和主题
pnpm add -D @vuepress/bundler-vite@next @vuepress/theme-default@next

yarn

# 安装 vuepress
yarn add -D vuepress@next
# 安装打包工具和主题
yarn add -D @vuepress/bundler-vite@next @vuepress/theme-default@next

pnpm

# 安装 vuepress
npm install -D vuepress@next
# 安装打包工具和主题
npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next

开始使用 VuePress

启动开发服务器

你可以在 package.json 中添加一些 scripts ：

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

运行 docs:dev 脚本可以启动开发服务器:

PNPM

pnpm docs:dev

yarn

yarn docs:dev

NPM

npm run docs:dev

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。

构建你的网站

运行 docs:build 脚本可以构建你的网站：

pnpm

pnpm docs:build

yarn

yarn docs:build

npm

npm run docs:build

在 docs/.vuepress/dist 目录中可以找到构建生成的静态文件。你可以查看 部署 来了解如何部署你的网站。

进一步了解 VuePress

现在，你应该已经有了一个简单可用的 VuePress 网站。但你可能仍需要阅读后续的指南来更加了解 VuePress 。

下一步，前往 配置 了解更多配置文件相关的内容。