VitePress 学习指南

主题

企业官网搭建 ​

使用 VitePress 搭建一个现代、专业的企业官网，包含首页、产品展示、关于我们和联系方式等模块。

📋 项目概述 ​

企业官网是 VitePress 的典型非文档场景应用。相比传统 CMS 或 WordPress，VitePress 构建的官网具有以下优势：

特性VitePressWordPress传统静态站
加载速度⚡ 极快🐢 较慢⚡ 快
维护成本🟢 低🟡 中🟢 低
安全性🔒 高🟡 中🔒 高
部署难度🟢 简单🟡 中等🟢 简单
自定义能力🟢 高🟡 中🟢 高

🏗️ 站点结构 ​

docs/
├── index.md                  # 首页
├── products.md               # 产品/服务
├── about.md                  # 关于我们
├── contact.md                # 联系方式
├── cases.md                  # 客户案例
├── news/
│   ├── index.md              # 新闻动态列表
│   └── release-v2.md         # 具体新闻页
├── public/
│   ├── images/
│   │   ├── hero-bg.svg       # 首页背景
│   │   ├── logo.svg          # 公司 Logo
│   │   └── team/             # 团队照片
│   └── favicon.svg
└── .vitepress/
    ├── config.mts
    └── theme/
        ├── index.ts
        ├── style.css
        └── components/
            ├── ContactForm.vue    # 联系表单
            ├── TeamSection.vue    # 团队展示
            └── ClientLogos.vue    # 客户 Logo 轮播

🎨 首页配置 ​

Hero 区域 ​

markdown
---
layout: home

hero:
  name: "TechCorp"
  text: "科技驱动未来"
  tagline: 专注企业级解决方案，助力数字化转型
  image:
    src: /images/hero-bg.svg
    alt: TechCorp
  actions:
    - theme: brand
      text: 免费试用
      link: /contact
    - theme: alt
      text: 了解产品
      link: /products

features:
  - title: 🚀 高性能
    details: 基于最新技术栈，确保系统稳定高效运行
  - title: 🔒 安全可靠
    details: 多层安全防护，企业数据安全有保障
  - title: 📊 数据驱动
    details: 智能分析，用数据赋能业务决策
  - title: 🌐 全球部署
    details: 支持多云部署，服务全球用户
  - title: 🔧 定制开发
    details: 灵活的架构设计，满足个性化需求
  - title: 📞 7x24 支持
    details: 专业团队全天候技术支持服务
---

数据统计展示 ​

在首页下方添加公司实力展示：

html
<div class="company-stats">
  <div class="stat-item">
    <div class="stat-number">500+</div>
    <div class="stat-label">企业客户</div>
  </div>
  <div class="stat-item">
    <div class="stat-number">99.9%</div>
    <div class="stat-label">系统可用率</div>
  </div>
  <div class="stat-item">
    <div class="stat-number">50ms</div>
    <div class="stat-label">平均响应时间</div>
  </div>
  <div class="stat-item">
    <div class="stat-number">10+</div>
    <div class="stat-label">年行业经验</div>
  </div>
</div>
css
/* docs/.vitepress/theme/style.css */
.company-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 48px auto;
  text-align: center;
}

.company-stats .stat-item {
  padding: 24px 16px;
}

.company-stats .stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--vp-c-brand-1);
}

.company-stats .stat-label {
  font-size: 0.875rem;
  color: var(--vp-c-text-2);
  margin-top: 8px;
}

@media (max-width: 640px) {
  .company-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

📦 产品页实现 ​

products.md ​

markdown
---
title: 产品与服务
description: 我们的核心产品和技术服务
---

# 产品与服务

## 核心产品

### 企业管理平台

一站式企业管理解决方案，覆盖人事、财务、项目管理等核心业务。

<div class="product-cards">
  <div class="product-card">
    <h3>🏢 人事管理</h3>
    <p>智能人事管理系统，覆盖招聘、考勤、薪酬全流程。</p>
    <ul>
      <li>智能简历筛选</li>
      <li>考勤自动统计</li>
      <li>薪酬一键计算</li>
    </ul>
  </div>
  <div class="product-card">
    <h3>📊 数据分析</h3>
    <p>多维度数据分析，辅助企业科学决策。</p>
    <ul>
      <li>实时数据大屏</li>
      <li>智能报表生成</li>
      <li>趋势预测分析</li>
    </ul>
  </div>
  <div class="product-card">
    <h3>🛡️ 安全防护</h3>
    <p>全方位安全体系，保障企业数据资产安全。</p>
    <ul>
      <li>等保合规认证</li>
      <li>数据加密传输</li>
      <li>权限精细管控</li>
    </ul>
  </div>
</div>

## 定价方案

| 方案 | 基础版 | 专业版 | 企业版 |
|------|--------|--------|--------|
| 价格 | ¥999/月 | ¥2,999/月 | 定制报价 |
| 用户数 | 50人 | 200人 | 不限 |
| 存储空间 | 100GB | 500GB | 不限 |
| 技术支持 | 工单 | 专属客服 | 7x24小时 |
| 定制开发 | - | 基础 | 全面 |
| SLA | 99.5% | 99.9% | 99.99% |

::: tip 免费试用
所有方案均支持 14 天免费试用，无需绑定信用卡。
:::

📬 联系表单组件 ​

ContactForm.vue ​

vue
<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  name: '',
  email: '',
  company: '',
  phone: '',
  message: ''
})

const submitted = ref(false)
const submitting = ref(false)

const handleSubmit = async () => {
  submitting.value = true

  // 模拟提交（实际项目中对接后端 API 或第三方服务）
  await new Promise(resolve => setTimeout(resolve, 1000))

  submitted.value = true
  submitting.value = false
}
</script>

<template>
  <div class="contact-form">
    <div v-if="!submitted">
      <form @submit.prevent="handleSubmit">
        <div class="form-row">
          <div class="form-group">
            <label>姓名 *</label>
            <input v-model="form.name" type="text" required placeholder="请输入姓名" />
          </div>
          <div class="form-group">
            <label>邮箱 *</label>
            <input v-model="form.email" type="email" required placeholder="请输入邮箱" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label>公司</label>
            <input v-model="form.company" type="text" placeholder="请输入公司名称" />
          </div>
          <div class="form-group">
            <label>电话</label>
            <input v-model="form.phone" type="tel" placeholder="请输入联系电话" />
          </div>
        </div>
        <div class="form-group">
          <label>留言 *</label>
          <textarea v-model="form.message" required rows="4" placeholder="请描述您的需求"></textarea>
        </div>
        <button type="submit" class="submit-btn" :disabled="submitting">
          {{ submitting ? '提交中...' : '提交咨询' }}
        </button>
      </form>
    </div>
    <div v-else class="success-message">
      <div class="success-icon">✓</div>
      <h3>提交成功！</h3>
      <p>我们将在 1 个工作日内与您联系。</p>
      <button @click="submitted = false; form = { name: '', email: '', company: '', phone: '', message: '' }" class="reset-btn">
        继续咨询
      </button>
    </div>
  </div>
</template>

🌙 深色模式适配 ​

企业官网必须做好深色模式适配：

css
/* docs/.vitepress/theme/style.css */

/* 公司 Logo 深色模式 */
.dark .company-logo {
  filter: brightness(0) invert(1);
}

/* 产品卡片深色模式 */
.dark .product-card {
  background: var(--vp-c-bg-soft);
  border-color: var(--vp-c-divider);
}

/* 统计数字深色模式 */
.dark .company-stats .stat-number {
  color: var(--vp-c-brand-2);
}

/* CTA 按钮深色模式 */
.dark .cta-button {
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

🔍 SEO 优化 ​

meta 标签配置 ​

ts
// docs/.vitepress/config.mts
export default defineConfig({
  head: [
    // Open Graph（社交分享）
    ['meta', { property: 'og:type', content: 'website' }],
    ['meta', { property: 'og:title', content: 'TechCorp - 企业级解决方案' }],
    ['meta', { property: 'og:description', content: '专注企业数字化转型' }],
    ['meta', { property: 'og:image', content: '/images/og-cover.jpg' }],

    // 结构化数据
    ['script', { type: 'application/ld+json' }, JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'Organization',
      name: 'TechCorp',
      url: 'https://example.com',
      logo: 'https://example.com/images/logo.svg',
      contactPoint: {
        '@type': 'ContactPoint',
        telephone: '+86-400-xxx-xxxx',
        contactType: 'sales'
      }
    })]
  ]
})

sitemap 配置 ​

ts
export default defineConfig({
  sitemap: {
    hostname: 'https://example.com',
    changefreq: 'weekly',
    lastmodDateOnly: true
  }
})

🚀 部署建议 ​

推荐部署平台 ​

平台优势适合
Vercel自动 HTTPS、全球 CDN中小企业
Netlify表单处理、边缘函数创业公司
阿里云 OSS国内访问快、备案友好国内企业
Cloudflare Pages免费无限带宽预算有限

CI/CD 自动部署 ​

yaml
# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm ci
      - run: npm run docs:build
      - uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

📐 响应式设计要点 ​

企业官网必须做好移动端适配：

css
/* 关键断点 */
@media (max-width: 960px) {
  /* 平板 */
  .company-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  /* 手机 */
  .hero-section {
    padding: 40px 16px;
  }

  .product-cards {
    grid-template-columns: 1fr;
  }

  .company-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* 表单堆叠 */
  .form-row {
    flex-direction: column;
  }
}

🎯 进阶挑战 ​

完成基础搭建后，尝试以下挑战来提升你的企业官网：

挑战难度描述
🌍 多语言站点⭐⭐添加英文版，使用 i18n 配置
📊 数据埋点⭐⭐集成 Google Analytics / 百度统计
💬 在线客服⭐⭐⭐集成第三方客服组件（如美洽、网易七鱼）
🔐 后台管理⭐⭐⭐⭐对接 Headless CMS（如 Strapi）实现内容管理
⚡ 性能极致优化⭐⭐⭐⭐图片懒加载、预加载关键资源、LCP < 2s
🎬 动画效果⭐⭐⭐首页滚动动画、产品 3D 展示、Lottie 动画

下一步 ​

贡献者

加载中...

想要成为贡献者？

在 CNB 上参与贡献

Copyright © 2016 - 2026 VitePress 学习指南