VuePress

目录

快速上手

注意

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

依赖环境

• Node.js v16.19.0+
• Yarn v1 classic （可选）

提示

• 使用 pnpm 时，你可能需要安装 vue 和 @vuepress/client 作为 peer-dependencies ，即

  pnpm add -D vue @vuepress/client@next

• 使用 yarn 2 时，你需要在 .yarnrc.yml 文件中设置 nodeLinker: 'node-modules' 。

手动安装

这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。

当下面的项目都完成后，VuePress 会在 http://localhost:8080

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

现在，你应该已经有了一个简单可用的 VuePress 文档网站。接下来，了解一下 VuePress 配置 相关的内容。

(1) 创建并进入一个新目录

mkdir vuepress-starter
cd vuepress-starter

(2) 初始化项目

< PNPM

git init
pnpm init

< YARN

git init
yarn init

< NPM

git init
npm init

(3) 将 VuePress 安装为本地依赖

< PNPM

pnpm add -D vuepress@next @vuepress/client@next vue

< YARN

git init
yarn init

< NPM

git init
npm init

(4) 在 package.json 中添加一些 scripts

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

(5) 将默认的临时目录和缓存目录添加到 .gitignore 文件中

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

(6) 创建你的第一篇文档

mkdir docs
echo '# Hello VuePress' > docs/README.md

(7) 在本地启动服务器来开发你的文档网站

< PNPM

pnpm docs:dev

< YARN

yarn docs:dev

< NPM

npm run docs:dev