Project Structure
This guide provides a detailed explanation of the file structure for projects created using VuePress and the Plume theme, helping you better organize and manage project files.
For projects created via the command-line tool, the typical file structure is as follows:
.git
public# Static assets
client.ts# Client configuration (optional)
collections.ts# Collections configuration (optional)
config.ts# VuePress main configuration
navbar.ts# Navbar configuration (optional)
plume.config.ts# Theme configuration file (optional)
foo.md
bar.md
markdown.md# Category article
article.md# Blog article
README.md# Site homepage
…
package.json
pnpm-lock.yaml
.gitignore
README.md
Manually created projects can also be organized using this structure as a reference
Documentation Source Directory
The Documentation Source Directory contains all the Markdown source files for your site. This directory must be specified when starting VuePress via the command line:
vuepress dev docs
# ↑ Documentation source directoryCorresponding package.json script configuration:
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}VuePress only processes files within the documentation source directory; other directories are ignored.
.vuepress Configuration Directory
.vuepress/ is the core configuration directory for VuePress, where you can configure your project, create custom components, and styles.
client.ts - Client Configuration
Used to extend VuePress client functionality, such as registering global components:
import { defineClientConfig } from 'vuepress/client'
export default defineClientConfig({
enhance({ app, router, siteData }) {
// app: Vue application instance
// router: Vue Router instance
// siteData: Site metadata
// Register global components
app.component('MyComponent', MyComponent)
},
setup() {
// setup method of the Vue root component
}
})config.ts - Main Configuration File
The core configuration file for VuePress, used to set up the theme, plugins, and build tool:
import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
lang: 'zh-CN',
theme: plumeTheme({
// Theme configuration...
}),
bundler: viteBundler(),
})plume.config.ts - Theme Configuration
A dedicated configuration file for the theme that supports hot-reload; service restart is not required after modifications:
import { defineThemeConfig } from 'vuepress-theme-plume'
import collections from './collections'
import navbar from './navbar'
export default defineThemeConfig({
logo: '/logo.svg',
profile: {
name: 'Theme Plume',
},
navbar,
collections,
// More configuration...
})import { defineNavbarConfig } from 'vuepress-theme-plume'
export default defineNavbarConfig([
// Navbar item configuration...
])import { defineCollections } from 'vuepress-theme-plume'
export default defineCollections([
{
type: 'post',
dir: 'blog',
title: 'Blog',
link: '/blog/'
},
{
type: 'doc',
dir: 'demo',
linkPrefix: '/demo/',
title: 'Documentation Examples',
sidebar: 'auto'
},
])
