VuePress

# 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 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:

← Configuration →