VuePress(未完)


  • https://vuepress.vuejs.org/zh/guide/

介绍

  • VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题
    • 注释:极简静态网站生成器 @vuepress/core
    • 注释:插件 API 是由 Vue 驱动?

快速上手

  • 将 VuePress 安装为本地依赖
yarn add -D vuepress # npm install -D vuepress
  • 在 package.json 中添加一些 scripts
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

目录结构

.
├── docs
│   ├── .vuepress (可选的)用于存放全局的配置、组件、静态资源等
│   │   ├── components (可选的)该目录中的 Vue 组件将会被自动注册为全局组件。
│   │   ├── theme (可选的)用于存放本地主题。
│   │   │   └── Layout.vue
│   │   ├── public (可选的) 静态资源目录。
│   │   ├── styles (可选的)用于存放样式相关的文件。
│   │   │   ├── index.styl 将会被自动应用的全局样式文件,具有比默认样式更高的优先级。
│   │   │   └── palette.styl 用于重写默认颜色常量,或者设置新的 stylus 颜色常量。
│   │   ├── templates (可选的, 谨慎配置) 存储 HTML 模板文件。
│   │   │   ├── dev.html 用于开发环境的 HTML 模板文件。
│   │   │   └── ssr.html 构建时基于 Vue SSR 的 HTML 模板文件。
│   │   ├── config.js (可选的) 配置文件的入口文件,也可以是 YML 或 toml。
│   │   └── enhanceApp.js (可选的) 客户端应用的增强。?
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json
  • 当你想要去自定义 templates/ssr.html 或 templates/dev.html 时,最好基于 默认的模板文件 (opens new window)来修改 https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/core/lib/client/index.dev.html
  • 把 docs 目录作为 targetDir,packages.json 中所有的“文件的相对路径”都是相对于 docs 目录的