UI 样式示例

本页面展示可在 VitePress 文档中使用的各种 UI 样式和设计模式。

---

卡片布局

🚀

极速开发

基于 Vite 构建，启动速度极快，热更新毫秒级响应，让开发体验丝滑流畅。

📦

开箱即用

内置 Markdown 扩展、全文搜索、多语言支持、暗色模式等丰富功能。

🎨

高度定制

支持自定义主题、组件扩展、CSS 变量覆盖，打造独特的文档风格。

⚡

SEO 友好

静态生成、服务端渲染，完美支持搜索引擎优化和社交媒体分享。

---

标签与徽章

技术栈标签

Vue 3TypeScriptVitePressMarkdownMermaidAlgoliaPiniaVitest

状态徽章

✓ 已发布⚠ 进行中● 计划中✕ 已废弃

---

信息卡片

快速开始2024-12-01

5 分钟搭建文档站

从零开始，快速搭建一个功能完整的 VitePress 文档站点，包含导航栏、侧边栏和全文搜索。

阅读详情 →

进阶教程2024-11-15

自定义主题开发

深入学习如何自定义 VitePress 主题，包括样式覆盖、组件扩展和插件集成。

阅读详情 →

---

进度指示器

前端开发85%

后端开发72%

测试覆盖45%

---

步骤导航

1

环境准备

安装 Node.js 18+ 和包管理器

2

初始化项目

运行 npx vitepress init 创建项目

3

配置主题

自定义导航栏、侧边栏和样式

4

部署上线

构建并部署到 GitHub Pages

---

代码对比

❌ 错误写法

// 不推荐：直接操作 DOM
document.getElementById('app').innerHTML = msg

✅ 正确写法

// 推荐：使用响应式数据
const message = ref('Hello')
// 自动更新视图

---

提示列表

✓

已完成数据库迁移，数据完整性已验证

✓

单元测试全部通过（128/128）

!

API 接口文档待更新，建议优先处理

✕

移动端适配存在兼容性问题，需修复后上线

---