项目结构
本指南详细说明使用 VuePress 和 Plume 主题创建的项目文件结构，帮助您更好地组织和管理项目文件。
通过命令行工具创建的项目，其典型文件结构如下：
.git
.vuepress# VuePress 配置目录
foo.md
bar.md
markdown.md# 分类文章
article.md# 博客文章
README.md# 站点首页
…
package.json
pnpm-lock.yaml
.gitignore
README.md
手动创建的项目也可参考此结构进行组织
文档源目录
文档源目录包含站点的所有 Markdown 源文件。在使用命令行工具启动 VuePress 时需指定此目录：
vuepress dev docs
# ↑ 文档源目录对应的 package.json 脚本配置：
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}VuePress 仅处理文档源目录内的文件，其他目录将被忽略。
.vuepress 配置目录
.vuepress/ 是 VuePress 的核心配置目录，您可在此配置项目、创建自定义组件和样式。
client.ts - 客户端配置
用于扩展 VuePress 客户端功能，如注册全局组件：
import { defineClientConfig } from 'vuepress/client'
export default defineClientConfig({
enhance({ app, router, siteData }) {
// app: Vue 应用实例
// router: Vue Router 实例
// siteData: 站点数据
// 注册全局组件
app.component('MyComponent', MyComponent)
},
setup() {
// Vue 根组件的 setup 方法
}
})config.ts - 主配置文件
VuePress 的核心配置文件，设置主题、插件和构建工具：
import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
lang: 'zh-CN',
theme: plumeTheme({
// 主题配置...
}),
bundler: viteBundler(),
})plume.config.ts - 主题配置
专为主题提供的配置文件，支持热更新，修改后无需重启服务：
.vuepress/plume.config.ts
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,
// 更多配置...
}).vuepress/navbar.ts
import { defineNavbarConfig } from 'vuepress-theme-plume'
export default defineNavbarConfig([
// 导航项配置...
]).vuepress/collections.ts
import { defineCollections } from 'vuepress-theme-plume'
export default defineCollections([
{
type: 'post',
dir: 'blog',
title: '博客',
link: '/blog/'
},
{
type: 'doc',
dir: 'demo',
linkPrefix: '/demo/',
title: '文档示例',
sidebar: 'auto'
},
])