vite + vue3 + ts + SSG 使用 VuePress

如果所需的数据是静态的，那么服务端渲染可以提前完成。这意味着我们可以将整个应用预渲染为 HTML，并将其作为静态文件部署。这增强了站点的性能表现，也使部署变得更容易，因为我们无需根据请求动态地渲染页面。Vue 仍可通过激活在客户端提供交互。这一技术通常被称为静态站点生成（SSG），也被称为 JAMStack。

SSG 有两种风格：单页和多页。这两种风格都能将站点预渲染为静态 HTML，区别在于：

单页 SSG：在初始页面加载后将其“激活”为 SPA。这需要更多的前期 JS 加载和激活成本，但后续的导航将更快，因为它只需要部分地更新页面内容，而无需重新加载整个页面。
多页 SSG：每次导航都会加载一个新页面。好处是它可以仅需最少的 JS——或者如果页面无需交互则根本不需要 JS！一些多页面 SSG 框架，如 Astro 也支持“部分激活”——它允许你通过 Vue 组件在静态 HTML 中创建交互式的“孤岛”。

单页 SSG更适合于重交互、深会话的场景，或需要在导航之间持久化元素或状态。否则，多页 SSG将是更好的选择。

VuePress，是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。

VuePress 2 支持 vue 3，VuePress 1 支持 vue 2

安装

# 创建并进入一个新目录
mkdir project-name
cd project-name

# 初始化项目
npm init -y

# 安装 VuePress 为本地依赖
npm install -D vuepress@next

在package.json中添加一些 scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },

创建你的第一篇文档

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

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

npm run docs:dev

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