# vuepress

建议使用 node v16.13.1(及以下版本)

# 1. 安装

# cli
npm install -D vuepress

# 插件
npm i -D @vuepress/plugin-nprogress vuepress-plugin-smooth-scroll

# 2. 目录

${root}/
    docs/
        .vuepress/
            public/
                logo.png
            config.js
        frontend/
            01.nginx.md
        README.md
    package.json

# 3. 配置

${root}/docs/.vuepress/config.js ：

module.exports = {
  title: '知识库',
  description: '知识库',
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }]
  ],
  
  markdown: {
    lineNumbers: true,
  },
  themeConfig: {
    sidebar: [
      ['/', 'Introduction'], // [ path, menuText]
      {
        title: '分组1',
        collapsable: false,
        children: [
          ['/frontend/01.nginx.md', 'nginx 的配置']
        ]
      }
    ]
  },

  plugins: [
    [
      '@vuepress/last-updated',
      {
        transformer: (timestamp, lang) => {
          moment.locale(lang);
          const lastUpdateTime = moment(timestamp);
          const fromNow = lastUpdateTime.fromNow();
          const date = lastUpdateTime.format('YYYY-MM-DD HH:mm:ss')
          return `${date} (${fromNow})`;
        }
      }
    ],
    '@vuepress/plugin-nprogress',
    'vuepress-plugin-smooth-scroll',
  ]
}

${root}/package.json ：

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

# 4. 开发主题

颜色变量：node_modules/@vuepress/core/lib/client/style/config.styl

# 4.1. 自定义样式

修改 docs/.vuepress/theme/styles/palette.styl 对默认样式进行修改

# 4.2. 修改 index.html 页面

docs/
  .vuepress/
    theme/
      templates/
        dev.html    # 开发时使用的 HTML 模板
        ssr.html    # 生产...

# 5. v-pre

避免被解析

::: v-pre

`Vue.filter(filterName, fn)`

:::

# 6. 导入代码文件

<<< @/docs/front-end/libs/echarts/codes/01-quick-start.html

-->

``html
xxx
``

必须使用绝对路径

# 7. 报错

# 7.1. 使用 node v17.2.0 导致报错

错误如下：

node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    ......
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.2.0

解决方法：

# 安装并使用 node v16
nvm install 16

  # Downloading node.js version 16.13.1 (64-bit)...
  # Extracting...
  # Complete

  # Installation complete. If you want to use this version, type

  # nvm use 16.13.1

nvm use 16.13.1

  # Now using node v16.13.1 (64-bit)

# 7.2. node_modules

vuepress 会扫描 docs 目录，并监视所有 md 文件。

如果 docs 目录下有 node_modules 目录，会导致长时间编译或报错。

# 8. 参考

本章目录