Project Structure
This guide will illustrate the file structure of a project created with VuePress and Plume, as well as how to utilize them within your project.
When you create a project using the command-line tool, its file structure looks like this:
- .git
- …
- package.json
- pnpm-lock.yaml
- .gitignore
- README.md
If you created the project manually, you can also manage your project by referring to this file structure.
Documentation Source Directory
The documentation source directory refers to the directory where all your site's markdown files are located. This directory is generally specified when you start VuePress using the command-line tool:
vuepress dev docs
# Here, the documentation source directory is declared as docs{
"scripts": {
"docs:dev": "vuepress dev docs",
// ^^^^
"docs:build": "vuepress build docs"
// ^^^^
}
}Generally, VuePress only takes over this directory, and other files outside the source directory will be ignored.
.vuepress Directory
The .vuepress/ directory is the VuePress configuration folder, where you can also create your own components, customize theme styles, etc.
In this directory:
client.ts
Client-side configuration file, where you can extend VuePress's functionality, such as declaring new global components, etc.
import { defineClientConfig } from 'vuepress/client'
export default defineClientConfig({
enhance({ app, router, siteData }) {
// app: vue app instance
// router: vue router instance
// siteData: vuepress site configuration
// Register global components
app.component('MyComponent', MyComponent)
},
setup() {
// Equivalent to the setup method on the root component of vue
}
})config.ts
The VuePress configuration file, where you need to make some necessary configurations, such as theme, plugins, build tools, etc.
import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
lang: 'en-US',
theme: plumeTheme({
// more...
}),
bundler: viteBundler(),
})plume.config.ts
Theme configuration file. Since modifying .vuepress/config.ts requires restarting the VuePress service each time, which is not necessary in most cases.
The theme moves the configurations that do not require restarting the service to here. When you modify the configuration here, the theme will be updated via hot reload.
import { defineThemeConfig } from 'vuepress-theme-plume'
import navbar from './navbar'
import notes from './notes'
export default defineThemeConfig({
logo: '/logo.svg',
profile: {
name: 'Theme Plume',
},
navbar,
notes,
// ... more
})import { defineNavbarConfig } from 'vuepress-theme-plume'
export default defineNavbarConfig([
// ...
])import { defineNotesConfig } from 'vuepress-theme-plume'
export default defineNotesConfig({
// ...
})notes Directory
The notes directory is used to store your knowledge notes, series documentation, etc.
How to Understand Knowledge Notes/Series Documentation?
A common scenario is that you are learning a skill and plan to record your learning experiences, key points, difficulties, etc., in your notes. In this case, you might write multiple documents for recording.
Alternatively, you are preparing for an interview and want to prepare interview questions and answers in advance. You might then have each question and answer as a separate document.
You would easily want to manage them all in a separate directory and, at the same time, be able to quickly navigate between different documents in the skill notes or between different interview questions in the generated documentation site.
This is a requirement that blog-type documentation cannot meet, and it is a pain point that notes aims to solve.
The above content can easily result in the following directory structure:
This allows for easy management of multiple series of documents, each with its own directory structure.
Other Directories/Files
In the documentation source directory, other directories and files, except for README.md which is recognized as the home page, will be identified as blog posts. The directory structure will be recognized as blog categories.
