VuePress 静态网站生成器快速入门指南

目录结构及介绍

当你使用 vuepress init <your-project> 初始化一个新的 VuePress 项目后，你会看到以下的基本目录结构：

.
├── docs/
│   ├── guide/
│   │   └── index.md
│   └── api/
│       └── command-line-interface.md
├── .vuepress/
│   ├── public/
│   ├── components/
│   ├── layouts/
│   └── config.js
└── package.json

• docs/: 包含了你要发布的所有文档，通常以 Markdown 格式写入。

  • guide/ 和 api/: 分别存储用户指南和API文档的Markdown文件。

• .vuepress/: 此目录用于存放 VuePress 自己的内容，包括配置文件、组件库、布局模板等。

  • public/: 存放公共资源如图片或字体文件。
  • components/: 在此处你可以创建自己的 Vue 组件并应用于项目中。
  • layouts/: 是放置自定义布局的地方，例如首页或者目录页。
  • config.js: 主配置文件，用于定制整个项目的各种设置。

• package.json: 应用的包说明文件，其中包含了必要的依赖项如 vuepress 和其插件。

项目启动文件介绍

package.json

此文件是 NPM 项目的标准描述文件，VuePress 的 package.json 可能看起来像这样：

{
  "name": "<your-package-name>",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build"
  },
  "keywords": [
    "vue",
    "vuepress"
  ],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "vuepress": "^1.7.1"
  }
}

主要关注的是 scripts 部分：

• dev: 用来运行 VuePress 的本地服务器进行开发。
• build: 执行构建过程，将所有 Markdown 转换为静态HTML页面。

项目配置文件介绍

.vuepress/config.js

这是最重要的配置文件，在这里你可以定制你的站点和文档行为。基本的配置可能包括：

module.exports = {
  title: 'My Amazing Site', // 网站标题
  description: 'A VuePress Site', // 网站描述
  base: '/my-amazing-site/', // 网站基础路径
  head: [ // 添加到 html 头部的信息
    ['link', { rel: 'icon', href: '/img/icon.png' }]
  ],
  themeConfig: { // 主题相关的配置选项
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ],
    sidebar: [
      '/',
      '/guide/',
      '/api/'
    ]
  },
  plugins: [ // 使用插件列表
    '@vuepress/back-to-top',
    '@vuepress/pwa'
  ]
}

以上配置展示了如何更改站点的基本信息、添加自定义的头部标签、配置导航条、侧边栏以及启用插件等。通过这个文件，你可以完全控制 VuePress 站点的行为和外观。

---

通过上述介绍，你应该能够熟悉 VuePress 的基本目录结构和启动流程，以及如何通过配置文件定制你的站点。这将是你开始构建高质量文档网站的基础。