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 文件时，浏览器中的内容也会自动更新。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com