提示

本文主要讲解 VuePress 项目的目录结构。

目录结构介绍

VuePress 遵循 “约定优于配置” 的原则，这样可以省去很多不必要的配置，减少了开发成本，提高可扩展性。

项目的基本结构如下，结构代码来自 VuePress 官网 (opens new window)。

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

• docs/.vuepress： 存放全局的配置、组件和静态资源。
• docs/.vuepress/public：静态资源目录，比如网站 logo 等。
• docs/.vuepress/config.js：配置文件的入口文件，大部分全局配置都在这里，比如导航、侧边栏等。
• docs/README.md：网站首页配置。

使用插件生成目录结构代码

在写技术文章的时候经常会用到上面的代码结构来进行阐述讲解。

本节介绍一款插件 mddir (opens new window) 用于自动生成代码样式的目录结构。

使用 npm 进行安装 mddir。

npm install mddir

进入 mddir 的 src 目录。

cd project/node_modules/mddir/src

执行命令。

node mddir "../../../"

然后在 project/node_modules/mddir/src 目录下会生成一个 directoryList.md 文件。文件内容就是当前项目的目录代码结构了。

|-- myself
    |-- .gitignore
    |-- deploy.sh
    |-- package-lock.json
    |-- package.json
    |-- yarn.lock
    |-- docs
        |-- .gitlab-ci.yml
        |-- README.md
        |-- .vuepress
        |   |-- config.js
        |   |-- dist
... 省略