vuepress2 概述

VuePress2

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。

VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。

相关项目：

1. vuepress1：基于 vue+webpack。
2. vuepress2：基于 vue+vite，目前处于 rc，但已可以用来构建站点。

工作原理

一个 VuePress 站点本质上是一个由 Vue 和 Vue Router 驱动的单页面应用 (SPA)。

路由会根据你的 Markdown 文件的相对路径来自动生成。每个 Markdown 文件都通过 markdown-it 编译为 HTML ，然后将其作为 Vue 组件的模板。因此，你可以在 Markdown 文件中直接使用 Vue 语法，便于你嵌入一些动态内容。

在开发过程中，我们启动一个常规的开发服务器 (dev-server) ，并将 VuePress 站点作为一个常规的 SPA。如果你以前使用过 Vue 的话，你在使用时会感受到非常熟悉的开发体验。

在构建过程中，我们会为 VuePress 站点创建一个服务端渲染 (SSR) 的版本，然后通过虚拟访问每一条路径来渲染对应的 HTML 。

快速开始

见：https://v2.vuepress.vuejs.org/zh/guide/getting-started.html

环境要求：

• Node.js v18.16.0+

使用项目模板：

npm init vuepress vuepress-starter

手动创建：

1. 初始化与依赖安装

   mkdir vuepress-starter && cd vuepress-starter
   npm init
   
   # 安装 vuepress
   npm install -D vuepress@next
   # 安装打包工具和主题
   npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next
   
   # 创建项目所需目录
   mkdir docs
   mkdir docs/.vuepress
   
   # 编写第一篇文档
   echo '# Hello VuePress' > docs/README.md

2. 创建 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(),
   })

3. 创建启动命令

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

4. 启动开发服务器（热重载）

   npm run docs:dev

目录结构

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

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

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

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