Appearance
// vitePressDemo
.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ api-examples.md
│ ├─ markdown-examples.md
│ └─ index.md
└─ package.json
使用npm init或者yarn init生成package.json文件后,以当前目录搭建vitePress项目(比如docs文件夹),docs文件夹称为项目根。
.vitepress
.vitepress文件夹是根目录下的文件夹(docs),里面储存VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码。
配置文件:.vitepress -> config.js称为配置文件。可以配置项目的标题、描述、主题等。
config.js文件很重要,所有的配置项都写在这里!!!
源文件:.vitepress之外的md文件
1. 项目根目录
其实就是与.vitepress同级的位置。
假设项目名称为vitePressDemo。
如果运行指令vitepress dev,则会把这个目录作为项目根目录,在这个目录下需要有一个.vitepress文件夹,是 VitePress 配置文件、开发服务器缓存、构建输出和可选主题自定义代码的保留位置。
如果想把vitePressDemo文件夹的子文件夹(docs)当成项目根目录,则可以直接运行vitepress dev docs, 给指令传递一个相对路径,然后就把那个子文件夹当成项目根目录。
.
├─ docs # project root
│ ├─ .vitepress # config dir
│ ├─ getting-started.md
│ └─ index.md
└─ ...
这里代表docs为项目的根目录
当项目运行起来后,路由访问为/index.html 、/getting-started.html
docs/index.md --> /index.html (accessible as /)
docs/getting-started.md --> /getting-started.html
2. 源目录
就是docs下的所有md文件,也就是与.vitepress文件夹同级的。但是假如你想放在docs下的子目录内,可以使用srcDir来配置。
srcDir 选项是相对于项目根目录解析的。例如,使用 srcDir: 'src',文件结构则为
. # project root
├─ .vitepress # config dir
└─ src # source dir
├─ getting-started.md
└─ index.md
生成到html为
src/index.md --> /index.html (accessible as /)
src/getting-started.md --> /getting-started.html