# Directory Structure
VuePress follows the principle of "Convention is better than configuration". The recommended structure is as follows:
.
├── docs
│ ├── .vuepress (Optional)
│ │ ├── components
(Optional)
│ │ ├── theme
(Optional)
│ │ │ └── Layout.vue
│ │ ├── public
(Optional)
│ │ ├── styles
(Optional)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates
(Optional, Danger Zone)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js
(Optional)
│ │ └── enhanceApp.js
(Optional)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
Note
Please note the capitalization of the directory name.
docs/.vuepress
: Used to store global configuration, components, static resources, etc.docs/.vuepress/components
: The Vue components in this directory will be automatically registered as global components.docs/.vuepress/theme
: Used to store local theme.docs/.vuepress/styles
: Stores style related files.docs/.vuepress/styles/index.styl
: Automatically applied global style files, generated at the ending of the CSS file, have a higher priority than the default style.docs/.vuepress/styles/palette.styl
: The palette is used to override the default color constants and to set the color constants of Stylus.docs/.vuepress/public
: Static resource directory.docs/.vuepress/templates
: Store HTML template files.docs/.vuepress/templates/dev.html
: HTML template file for development environment.docs/.vuepress/templates/ssr.html
: Vue SSR based HTML template file in the built time.docs/.vuepress/config.js
: Entry file of configuration, can also beyml
ortoml
.docs/.vuepress/enhanceApp.js
: App level enhancement.
Note
When customizing templates/ssr.html
, or templates/dev.html
, it’s best to edit it on the basis of the default template files (opens new window), otherwise it may cause a build failure.
# Default Page Routing
Here we use the docs
directory as the targetDir
(see Command-line Interface). All the "Relative Paths" below are relative to the docs
directory. Add scripts
in package.json
which is located in your project’s root directory:
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
For the above directory structure, the default page routing paths are as follows:
Relative Path | Page Routing |
---|---|
/README.md | / |
/guide/README.md | /guide/ |
/config.md | /config.html |
Also see: