slidev-project-structure（Slidev 项目结构）

## Directory Conventions

### components/

Custom Vue components auto-imported into slides:

<!-- components/Counter.vue --> <script setup lang="ts"> import { ref } from 'vue'

const count = ref(0) </script>

<template> <div class="flex items-center gap-4"> <button @click="count--">-</button> <span>{{ count }}</span> <button @click="count++">+</button> </div> </template>

Use in slides:

Interactive Counter

<Counter />

### layouts/

Custom layouts extend built-in ones:

<!-- layouts/my-intro.vue --> <template> <div class="slidev-layout my-intro"> <div class="header"> <slot name="header" /> </div> <div class="main"> <slot /> </div> <div class="footer"> <slot name="footer"> <span>My Company</span> </slot> </div> </div> </template>

<style scoped> .my-intro { display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: 2rem; } </style>

Use in slides:

layout: my-intro

::header::

Welcome

::default:: Main content here

::footer:: Custom footer

### public/

Static assets served at root URL:

public/ ├── images/ │ ├── logo.png # Use: /images/logo.png │ └── diagram.svg ├── favicon.ico # Use: /favicon.ico └── data.json # Use: /data.json

### styles/

Global styles applied to all slides:

/* styles/index.css */ @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

:root { --slidev-theme-primary: #3b82f6; }

.slidev-layout { font-family: 'Inter', sans-serif; }

/* Custom utility classes */ .highlight { background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); padding: 0 0.25em; }

### setup/

Configuration scripts:

// setup/main.ts - Vue app configuration import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app, router }) => { // Register global components // Configure plugins })

// setup/shiki.ts - Code highlighter import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => { return { themes: { dark: 'vitesse-dark', light: 'vitesse-light', }, } })

// setup/monaco.ts - Monaco editor import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(() => { return { editorOptions: { fontSize: 14, minimap: { enabled: false }, }, } })

### pages/

Additional slide files for modular presentations:

<!-- pages/intro.md -->

Introduction Section

About Me

Agenda

Import in main file:

src: ./pages/intro.md

Main Content

src: ./pages/conclusion.md

## Vite Configuration

// vite.config.ts import { defineConfig } from 'vite'

export default defineConfig({ slidev: { vue: { // Vue plugin options }, }, // Standard Vite options server: { port: 3030, }, })

## UnoCSS Configuration

// uno.config.ts import { defineConfig } from 'unocss'

export default defineConfig({ shortcuts: { 'bg-main': 'bg-white dark:bg-slate-900', 'text-main': 'text-slate-900 dark:text-slate-100', }, theme: { colors: { primary: '#3b82f6', }, }, })

## Theme Configuration

### Using a Theme

theme: seriph themeConfig: primary: '#5d8392' secondary: '#8b5cf6'

### Ejecting a Theme

To customize a theme's source code:

slidev theme eject

This copies the theme to your project for full customization.

## Multi-File Presentations

### Importing Slides

src: ./pages/section1.md

src: ./pages/section2.md

### With Frontmatter Merging

src: ./pages/intro.md title: Overridden Title class: custom-class

## Generated Files (.slidev/)

The `.slidev/` directory contains:

*   `drawings/` - Persisted drawings
*   Other generated assets

Add to `.gitignore`:

.slidev node_modules dist

## Best Practices

1.  **Keep slides.md focused**: Use `src` imports for large presentations
2.  **Organize assets**: Use `public/images/` for all images
3.  **Reuse components**: Create components for repeated patterns
4.  **Version control**: Commit all source files except `.slidev/` and `dist/`
5.  **Document custom layouts**: Add comments explaining slot usage

## Output Format

When explaining project structure, provide:

RECOMMENDED STRUCTURE: ├── slides.md # Main file ├── components/ # Custom Vue components ├── layouts/ # Custom layouts ├── public/ # Static assets ├── styles/ # Global CSS └── package.json # Dependencies

KEY CONFIGURATION:

• Theme: [theme name]
• Addons: [list of addons]
• Custom components: [component names]
• Custom layouts: [layout names]

FILES TO CREATE:

1. [filename] - [purpose]
2. [filename] - [purpose]

GITIGNORE: .slidev/ node_modules/ dist/