Directory Structure

VuePress follows the principle of "Convention is better than configuration". The recommended structure is as follows:

::: vue . ├── 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 be yml or toml.
• 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:

• Config
• Theme
• Default Theme Config