vuePress从零开始搭建自己专属的文档集合

梦里梦外; 2022-01-17 21:23 319阅读 0赞

VuePress 由两部分组成：一部分是支持用 Vue 开发主题的极简静态网站生成器，另一个部分是为书写技术文档而优化的默认主题。在VuePress应用的目录里面，一个.md文件可以生产一个.html文件，文件夹目录下默认访问README.md文件，也就相当于目录下的index.html，所以本地测试环境访问的链接如：`http://localhost:8081/bar/barOne.html`。

> 确保你的系统node.js版本 >= 8

#### 环境搭建 ####

**安装**

全局安装：

`npm install -g vuepress`

创建项目目录：

`mkdir myproject`

初始化项目：

`cd myproject`

`npm init -y`

新建docs文件夹：

`mkdir docs`

新建markdown文件：

`echo '# Hello VuePress!' > README.md`

设置package.json启动：

运行`npm run build`会生成静态目录dist

{
      "scripts": {
        "start": "vuepress dev docs",
        "build": "vuepress build docs"
      }
    }
    复制代码

创建.vuepress目录：

进入docs文件夹中创建.vuepress目录存放vuePress的相关文件

`cd docs`

`mkdir .vuepress`

创建config.js文件：

进入.vuepress文件夹中创建config.js文件，config.js是vuePress必要的配置文件，它导出一个js对象

`cd .vuepress`

`type nul>config.js`

#### 基本配置 ####

**站点信息**

config.js配置：

config.js文件包含网站的标题，描述，部署信息等配置，其他详细配置见[官方文档][Link 1]

module.exports = {
      title: 'Hello VuePress',
      description: 'Just playing around'
    }
    复制代码

**主题配置**

默认主题配置：

进入docs目录，修改README.md文件

---
    home: true
    heroImage: /hero.png
    actionText: 快速上手 →
    actionLink: /zh/guide/
    features:
    - title: 简洁至上
      details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
    - title: Vue驱动
      details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
    - title: 高性能
      details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2018-present Evan You
    ---
    复制代码

导航栏配置：

配置config.js，可以使用themeConfig配置给站点添加导航链接，在docs目录下新建about.md和contact.md文件，其他详细配置请查看[官方文档][Link 2]

module.exports = {
      themeConfig: {
        nav: [
          { text: 'Home', link: '/' },
          { text: 'foo', link: '/foo/' },
          { text: 'bar', link: '/bar/' },
          { text: 'About', link: '/about' },
          { text: 'Contact', link: '/contact' },
        ]
      }
    }
    复制代码

新增其他页面：

为了更好的演示侧边栏效果，新增四个页面，分别在docs目录下新增foo、bar文件夹，foo文件夹里面新建fooOne.md、fooTwo.md、RADME.md文件，新建文件或文件夹可参考上面命令行工具

配置侧边栏：

配置config.js，可以使用sidebar配置给站点添加侧边栏

module.exports = {
        sidebar: {
          '/foo/': [
            '',
            'fooOne',
            'fooTwo'
          ],
          '/bar/': [
            '',
            'barOne',
            'barTwo'
          ]
        }
      }
    }
    
    复制代码

搜索配置：

配置config.js，可以使用search配置站点是否禁用启用搜索，可以使用searchMaxSuggestions配置站点搜素显示的结果条数

module.exports = {
        search: true,
        searchMaxSuggestions: 10
      }
    }
    复制代码

至此，一个简单的vuePress应用基本配置已经完成，最终的config.js文件如下：

module.exports = {
      title: 'Hello VuePress',
      description: 'Just playing around',
      themeConfig: {
        nav: [
          { text: 'Home', link: '/' },
          { text: 'foo', link: '/foo/' },
          { text: 'bar', link: '/bar/' },
          { text: 'About', link: '/about' },
          { text: 'Contact', link: '/contact' }
        ],
        sidebar: {
          '/foo/': [
            '',
            'fooOne',
            'fooTwo'
          ],
          '/bar/': [
            '',
            'barOne',
            'barTwo'
          ]
        },
        search: true,
        searchMaxSuggestions: 10
      }
    }
    复制代码

现在可以运行`npm run build`构建项目，生产dist目录文件，发布到对应的服务上去了。

转载于:https://juejin.im/post/5caf15ea5188251b1f4d92bd

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fvuepress.vuejs.org%2Fzh%2Fconfig%2F%23%25E5%259F%25BA%25E6%259C%25AC%25E9%2585%258D%25E7%25BD%25AE
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fvuepress.vuejs.org%2Fzh%2Fdefault-theme-config%2F%23%25E5%25AF%25BC%25E8%2588%25AA%25E6%25A0%258F