快速开始

依赖环境

  • Node.js V18.16.0+
  • 包管理器,如pnpm、yarn、npm

创建项目

有两种方式快速创建项目，分别是通过create-vuepress 创建，手动创建。

使用create-vuepress创建

pnpm create vuepress vuepress-starter
yarn create vuepress vuepress-starter
npm init vuepress vuepress-starter

手动创建

  • 创建并进入一个新目录
mkdir vuepress-starter
cd vuepress-starter
  • 初始化项目
git init
pnpm init
git init
yarn init
git init
npm init
  • 安装 VuePress
# 安装 vuepress 和 vue
pnpm add -D vuepress@next vue
# 安装打包工具和主题
pnpm add -D @vuepress/bundler-vite@next @vuepress/theme-default@next
# 安装 vuepress
yarn add -D vuepress@next
# 安装打包工具和主题
yarn add -D @vuepress/bundler-vite@next @vuepress/theme-default@next
# 安装 vuepress
npm install -D vuepress@next
# 安装打包工具和主题
npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next
  • 创建 docs 目录和 docs/.vuepress 目录
mkdir docs
mkdir docs/.vuepress
  • 创建 VuePress 配置文件 docs/.vuepress/config.js
import {viteBundler} from '@vuepress/bundler-vite'
import {defaultTheme} from '@vuepress/theme-default'
import {defineUserConfig} from 'vuepress'

export default defineUserConfig({
    bundler: viteBundler(),
    theme: defaultTheme(),
})
  • 创建你的第一篇文档
echo '# Hello VuePress' > docs/README.md

目录结构

创建完成后，你项目的目录结构应该是这样的：

├─ docs
│  ├─ .vuepress
│  │  └─ config.js
│  └─ README.md
└─ package.json

docs 目录是你放置 Markdown 文件的地方，它同时也会作为 VuePress 的源文件目录。

docs/.vuepress 目录，即源文件目录下的 .vuepress 目录，是放置所有和 VuePress 相关的文件的地方。当前这里只有一个配置文件。默认还会在该目录下生成临时文件、缓存文件和构建输出文件。建议你把它们添加到 .gitignore 文件中。

示例 `.gitignore` 文件
# VuePress 默认临时文件目录
.vuepress/.temp
# VuePress 默认缓存目录
.vuepress/.cache
# VuePress 默认构建生成的静态文件目录
.vuepress/dist

开始使用 VuePress

启动开发服务器

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

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

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

pnpm docs:dev
yarn docs:dev
npm run docs:dev

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

构建你的网站

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

pnpm docs:build
yarn docs:build
npm run docs:build

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

进一步了解 VuePress

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

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

上次更新: