VUP

简体中文

English

简体中文

English

Appearance

VitePress 模板 ​

基于 VitePress + TypeScript 的现代化静态站点开发模板，支持多语言、主题定制和完整的开发工具链。

技术栈 ​

  • VitePress - 基于 Vite 的静态站点生成器
  • Vue 3 - 渐进式 JavaScript 框架
  • TypeScript - JavaScript 的超集，提供类型安全
  • Vite - 下一代前端构建工具
  • Tailwind CSS - 实用优先的 CSS 框架
  • SCSS - CSS 预处理器，增强样式编写能力

快速开始 ​

创建项目 ​

bash
# 初始化项目
vup init my-project

# 进入项目目录
cd my-project

# 添加 VitePress 应用
vup add my-docs
# 选择 VitePress 模板

开发 ​

bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

开发服务器将在 http://localhost:9302 启动

构建 ​

bash
# 构建静态站点
pnpm build

# 预览构建结果
pnpm preview

项目结构 ​

my-docs/
├── src/
│   ├── .vitepress/                # VitePress 配置
│   │   ├── config.mts             # 配置文件
│   │   └── theme/                 # 主题文件
│   │       ├── components/        # 自定义组件
│   │       ├── layouts/           # 布局组件
│   │       └── styles/            # 样式文件
│   ├── public/                    # 静态资源
│   │   ├── favicon.ico            # 网站图标
│   │   └── images/                # 图片资源
│   │       └── vup.svg
│   ├── en/                        # 英文内容
│   │   ├── index.md               # 英文首页
│   │   └── docs.md                # 英文文档
│   ├── index.md                   # 中文首页
│   ├── docs.md                    # 中文文档
│   └── components/                # Vue 组件
├── package.json                   # 项目配置
├── tsconfig.json                  # TypeScript 配置
└── README.md                      # 项目说明

核心特性 ​

🎯 TypeScript 支持 ​

完整的 TypeScript 支持，提供类型安全和智能提示：

typescript
// 组件中使用 TypeScript
<script setup lang="ts">
interface User {
  id: number;
  name: string;
  email: string;
}

const user = ref<User>({
  id: 1,
  name: 'John Doe',
  email: 'john@example.com'
});
</script>

🚀 VitePress 静态站点生成 ​

基于 VitePress 的强大功能：

  • 静态生成 - 预渲染的静态 HTML 页面
  • Markdown 支持 - 丰富的 Markdown 功能
  • 主题定制 - 可定制的主题系统
  • 组件支持 - Vue 组件在 Markdown 中使用
  • 搜索功能 - 内置全文搜索
  • SEO 优化 - 自动生成 meta 标签

🎨 样式系统 ​

使用 Tailwind CSS + SCSS 的组合方案：

vue
<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-blue-600">
      {{ title }}
    </h1>
  </div>
</template>

<style lang="scss" scoped>
.container {
  @apply bg-white rounded-lg shadow-md;

  h1 {
    @apply text-blue-600;
  }
}
</style>

🌍 多语言支持 ​

内置完整的多语言支持：

markdown
<!-- 中文内容 -->

# 欢迎使用 VitePress

这是一个基于 VitePress 的静态站点模板。

<!-- 英文内容 -->

# Welcome to VitePress

This is a static site template based on VitePress.

📄 Markdown 增强 ​

VitePress 提供了丰富的 Markdown 功能：

markdown
# 标题

## 子标题

### 代码块

```typescript
const message = 'Hello VitePress!';
console.log(message);
```

### 🔍 搜索功能

内置全文搜索功能，无需额外配置：

```typescript
// .vitepress/config.mts
export default defineConfig({
  themeConfig: {
    search: {
      provider: 'local', // 使用本地搜索
    },
  },
});
```

开发工具 ​

代码质量 ​

  • ESLint - 代码质量检查
  • Prettier - 代码格式化
  • TypeScript - 类型检查

开发命令 ​

bash
# 开发服务器
pnpm dev

# 构建静态站点
pnpm build

# 预览构建结果
pnpm preview

# 代码检查
pnpm lint
pnpm lint:fix

# 代码格式化
pnpm format

热重载 ​

VitePress 提供极速的热重载体验：

  • 修改 Markdown 文件时自动刷新
  • 修改 Vue 组件时热更新
  • 修改配置文件时自动重启

主题定制 ​

自定义主题 ​

typescript
// .vitepress/theme/index.ts
import { h } from 'vue';
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';
import './styles/custom.css';

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {
      // 自定义插槽
    });
  },
  enhanceApp({ app, router, siteData }) {
    // 注册全局组件
  },
} satisfies Theme;

自定义样式 ​

scss
// .vitepress/theme/styles/custom.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// 自定义样式
.custom-class {
  @apply bg-white rounded-lg shadow-md p-4;
}

配置管理 ​

VitePress 配置 ​

typescript
// .vitepress/config.mts
import { defineConfig } from 'vitepress';

export default defineConfig({
  title: 'VitePress 模板',
  description: '基于 VitePress 的静态站点模板',

  // 多语言配置
  locales: {
    root: {
      label: '中文',
      lang: 'zh-CN',
    },
    en: {
      label: 'English',
      lang: 'en-US',
    },
  },

  // 主题配置
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '文档', link: '/docs' },
    ],
    sidebar: {
      '/': [{ text: '介绍', link: '/docs' }],
      '/en/': [{ text: 'Introduction', link: '/en/docs' }],
    },
  },
});

页面级配置 ​

markdown
---
title: 页面标题
description: 页面描述
keywords: 关键词1, 关键词2
---

# 页面内容

Vue 组件支持 ​

在 Markdown 中使用组件 ​

vue
<!-- 在 Markdown 中使用 Vue 组件 -->
<Demo />

<script setup>
import Demo from './components/Demo.vue';
</script>

组件开发 ​

vue
<template>
  <div class="demo-container">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string;
  description: string;
}

defineProps<Props>();
</script>

<style lang="scss" scoped>
.demo-container {
  @apply bg-gray-50 p-6 rounded-lg;
}
</style>

最佳实践 ​

内容组织 ​

  • 使用清晰的目录结构
  • 合理使用 Markdown 语法
  • 保持内容的一致性和可读性
  • 充分利用 VitePress 的特性

主题定制 ​

  • 基于默认主题进行扩展
  • 保持与 VitePress 设计语言的一致性
  • 合理使用 Tailwind CSS 类
  • 注意响应式设计

性能优化 ​

  • 合理使用图片资源
  • 避免过大的 Markdown 文件
  • 优化构建配置
  • 使用 CDN 加速静态资源

SEO 优化 ​

  • 合理设置页面标题和描述
  • 使用语义化的 HTML 结构
  • 优化图片 alt 属性
  • 合理使用内部链接

部署 ​

静态部署 ​

bash
# 构建静态站点
pnpm build

# 部署到静态托管服务
# 如 Vercel、Netlify、GitHub Pages 等

部署到 Vercel ​

VitePress 应用可以轻松部署到 Vercel。详细的部署配置和步骤请参考 Vercel 部署指南。

其他部署平台 ​

  • Netlify - 支持自动部署和预览
  • GitHub Pages - 免费静态托管
  • Cloudflare Pages - 全球 CDN 加速
  • AWS S3 - 企业级静态托管

相关资源 ​

Copyright © 2025 VUP-CLI