创建项目

// 1.创建项目,直接在空项目下安装vitepress(npm/yarn等都可以,这个可以看官网,官网给了好几种安装方式)
yarn add -D vitepress
// 2.初始化配置项目(npm/官网也给了多种包管理工具的安装方式)
yarn vitepress init
// 初始化命令执行完会遇到以下几个问题
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?  // 将哪个目录作为根目录(默认./)
│  ./docs
│
◇  Site title: // 设置标题(有默认的,可以直接回车,后期可以改)
│  My Awesome Project
│
◇  Site description: // 设置网站描述(也是可以默认的,后期可以改)
│  A VitePress Site
│
◆  Theme: //选择使用的主题模版
│  ● Default Theme (Out of the box, good-looking docs)  //默认的主题模版
│  ○ Default Theme + Customization //使用默认+自定义的,我选的这个
│  ○ Custom Theme //使用自定义主题
◇  Use TypeScript for config and theme files? //是否使用ts作为模版(我选的是no)
│  ● Yes / ○ No
◆  Add VitePress npm scripts to package.json? //是否将package.json作为配置文件(这里选择yes)
│  ● Yes / ○ No
└

运行

yarn run docs:dev

定制主页

找到.vitepress -> config.mjs

import { defineConfig } from 'vitepress'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "标题",
  description: "副标题",
  outDir: "dist", //输出目录
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: '首页', link: '/' },
      { text: '学习Ai', link: '/markdown-examples' }
    ],

    sidebar: [
      {
        text: 'Examples',
        items: [
          { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      }
    ],

    lastUpdated: {
      text: "最后更新",
      formatOptions: {
        dateStyle: "short",
        timeStyle: "short",
      },
    },
    search: {
      provider: 'local',
      //配置中文提示
      options:{
        translations: {
          button: {
            buttonText: '搜索',
            buttonAriaLabel: '搜索'
          },
          modal: {
            searchBoxPlaceholder: '搜索文档',
            resetButtonTitle: '清除查询条件',
            closeButtonAriaLabel: '关闭搜索',
            noResultsText: '没有找到结果',
            footer: {
              selectText: '选择',
              noResultsText: '未找到结果',
              statsText: {
                one: '1个结果',
                other: '{n}个结果'
              },
              closeText: '关闭',
              navigateText: '导航到结果'
            }
          }
        }
      }
    },
    //页脚
    footer: {
      message: `<a href="https://www.alliancer.com.cn/" target="_blank">官方网站</a>`,
      copyright: `版权所有 © 2019-${new Date().getFullYear()} `,
    },
    //文档页脚
    docFooter: {
      prev: "上一页",
      next: "下一页",
    },
    //中文配置
    langMenuLabel: "多语言", 
    returnToTopLabel: "回到顶部",
    sidebarMenuLabel: "菜单",
    darkModeSwitchLabel: "主题",
    lightModeSwitchTitle: "切换到浅色模式",
    darkModeSwitchTitle: "切换到深色模式",
    outlineTitle: "目录"
  },
  markdown: {
    //显示行数
    lineNumbers: true,
    //中文配置
    container:{
      tipLabel: "提示",
      warningLabel: "警告",
      noteLabel: "注意",
      dangerLabel: "危险",
      detailsLabel: "详情",
      infoLabel: "信息",
    }
  },
})

找到index.md

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home

hero:
  name: "名字"
  text: "简介"
  tagline: "标语"
  image:
    src: /public/logo.png
    alt: logo
  actions:
    - theme: brand
      text: 开始学习Ai
      link: /markdown-examples
    - theme: alt
      text: Ai能做什么?
      link: /api-examples

features:
  - title: DeepSeek
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
     icon: 'svg代码' # 配置icon图标
  - title: Feature B
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
  - title: Feature C
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
---