vuepress入门级图文教程vuepress入门级图文教程，当我们想要实现点击不同的导航栏的按钮，左侧显示不同的侧边栏

1 安装环境

1.1 安装nodejs

whttps://registry.npmmirror.com/-/binary/node/latest-v16.x/node-v16.17.0-linux-x64.tar.gz

# 解压
#tar -xf node-v16.18.0-linux-x64.tar.xz 
tar -zvxf node-v16.17.0-linux-x64.tar.gz

# 删除安装包
rm -rf node-v16.17.0-linux-x64.tar.xz 

# 修改名称
mv node-v16.17.0-linux-x64 node

# 配置node环境变量（软链）
ln -s /soft/node/bin/node /usr/local/bin/node

ln -s /soft/node/bin/npm /usr/local/bin/npm


# 查看ndoe版本
node -v

npm -v
# 输出v16.18.0

1.2 配置npm镜像源

npm config set registry https://registry.npm.taobao.org

2 快速开始

2.1 安装vuepress

# 创建文件夹
mkdir vuepress-demo
# 进入文件夹
cd vuepress-demo
# 初始化
npm init -y
# 安装vuepress
npm install -D vuepress

2.2 配置script

/vuepress-demo/package.json中增加如下script，如果没有这个文件就新建一个

{
    "devDependencies":{
        "vuepress":"^1.9.7"
    },
    "scripts":{
        "docs:dev":"vuepress dev docs  --temp .temp",
        "docs:build":"vuepress build docs"
    }
}

--temp .temp：修改文件实时生效

2.3 运行

在vuepress-demo创建docs下创建一个名为README.md的文件，并向其中输入以下内容：

# hello vuepress

执行下面的命令运行

npm run docs:dev

3 配置vuepress

3.1 标题配置

在/vuepress-demo/docs 创建一个 .vuepress 的文件夹

在/vuepress-demo/docs/.vuepress 创建config.js文件

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

3.2 主页配置

修改/vuepress-demo/docs/README.md文件

---
home: true
heroImage: https://excalidraw.com/apple-touch-icon.png
heroText: 这是标题
tagline: 这是副标题
actionText: 快速上手 →
actionLink: http://www.baidu.com
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: 高性能高性能高性能
footer: MIT Licensed | Copyright © 2018-present phyger
---

# 重新执行启动命令
npm run docs:dev

显示效果

3.3 图标配置

修改/vuepress-demo/docs.vuepress/config.js文件，配置log图标

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  themeConfig: {
    logo: 'https://excalidraw.com/apple-touch-icon.png',
  }
}

# 重新执行启动命令
npm run docs:dev

显示效果

3.4 导航栏配置

修改/vuepress-demo/docs.vuepress/config.js文件，配置nav导航栏链接

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  themeConfig: {
    logo: 'https://excalidraw.com/apple-touch-icon.png',
    nav: [
      { text: '首页', link: '/' },
      { text: '关于', link: 'https://www.baidu.com' },
      { text: '友链', link: 'https://www.baidu.com' },
    ]
  }
}

修改/vuepress-demo/docs.vuepress/config.js文件，配置配置下拉菜单

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  themeConfig: {
    logo: 'https://excalidraw.com/apple-touch-icon.png',
    nav: [
      { text: '首页', link: '/' },
      { text: '关于', link: 'https://www.baidu.com' },
      { text: '友链', link: 'https://www.baidu.com' },
      {
        text: '下拉菜单',
        ariaLabel: '这是提示语',
        items: [
          { text: '下拉1', link: '/', target:'_self' },
          { text: '下拉2', link: 'https://www.baidu.com', target:'_blank' }
        ]
      }
    ]
  }
}

target:'_blank' ，打开新的标签页
target:'_self' ，在当前页打开

3.5 侧边栏配置

修改/vuepress-demo/docs/.vuepress/config.js文件，配置sidebar侧边栏

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  themeConfig: {
    logo: 'https://excalidraw.com/apple-touch-icon.png',
    nav: [
      { text: '首页', link: '/' },
      { text: '侧边栏测试', link: '/侧边栏测试/侧边栏测试文档一' }
    ],
    sidebar: [
      {
        title: "侧边栏测试",
        path: "/侧边栏测试/侧边栏测试文档一",
        collapsable: false,
        children: [
            { title: "侧边栏测试文档一", path: "/侧边栏测试/侧边栏测试文档一" },
            { title: "侧边栏测试文档二", path: "/侧边栏测试/侧边栏测试文档二" },
            { title: "侧边栏子项", path: "/侧边栏测试/侧边栏子项/侧边栏子项文档一",
                children: [
                    { title: "侧边栏子项文档一", path: "/侧边栏测试/侧边栏子项/侧边栏子项文档一" },
                    { title: "侧边栏子项文档二", path: "/侧边栏测试/侧边栏子项/侧边栏子项文档二" }
                ]
            }
        ]
      }
    ]
  }
}

/vuepress-demo/docs/文件树的结构

├─.vuepress
│      config.js
│
└─侧边栏测试
    │  侧边栏测试文档一.md
    │  侧边栏测试文档二.md
    │
    └─侧边栏子项
            侧边栏子项文档一.md
            侧边栏子项文档二.md

显示效果

3.6 图片配置

让vuepress的图片在相对路径下也能显示，而不需要图床

1.安装解析插件

npm install --save-dev markdown-it-disable-url-encode

2.配置 .vuepress/config.js

module.exports = {
    ... 
    // 处理路径问题
    markdown: {
        extendMarkdown: md => {
            md.set({breaks: true})
            md.use(require("markdown-it-disable-url-encode"), "./")
        }
    }
    ...
};

3.7 非固定侧边栏配置

当我们想要实现点击不同的导航栏的按钮，左侧显示不同的侧边栏，则需要按照下面的方式进行配置

3.7.1 效果图

效果图一：点击AAA只显示AAA相关的侧边栏

效果图二：点击BBB只显示BBB相关的侧边栏

3.7.2 文件树

下面是/vuepress-demo/docs/目录下文件树的结构

│  README.md
│
├─.vuepress
│      config.js
│      nav.js
│      sidebar.js
│
├─AAA
│  │  AAA-01.md
│  │  AAA-02.md
│  │  sidebar.js
│  │
│  └─AAA-SUB
│          AAA-SUB-01.md
│          AAA-SUB-02.md
│
└─BBB
    │  BBB-01.md
    │  BBB-02.md
    │  sidebar.js
    │
    └─BBB-SUB
            BBB-SUB-01.md
            BBB-SUB-02.md

3.7.3 配置文件

核心配置文件 /vuepress-demo/docs/.vuepress/config.js

module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  themeConfig: {
    logo: 'https://excalidraw.com/apple-touch-icon.png',
    nav: require("./nav.js"),
    sidebar: require("./sidebar.js")
  }
}

导航栏配置 /vuepress-demo/docs/.vuepress/nav.js

module.exports = [
    { text: '首页', link: '/' },
    { text: 'AAA', link: '/AAA/AAA-01' },
    { text: 'BBB', link: '/BBB/BBB-01' }
]

侧边栏配置 /vuepress-demo/docs/.vuepress/sidebar.js

module.exports = {
    '/AAA/': require('../AAA/sidebar.js'),
    '/BBB/': require('../BBB/sidebar.js'),
}

AAA目录下的侧边栏 /vuepress-demo/docs/AAA/sidebar.js

module.exports = [
  { title: "AAA-01", path: "/AAA/AAA-01" },
  { title: "AAA-02", path: "/AAA/AAA-02" },
  { title: "AAA-SUB", path: "/AAA/AAA-SUB/AAA-SUB-01",
        children: [
                    { title: "AAA-SUB-01", path: "/AAA/AAA-SUB/AAA-SUB-01" },
                    { title: "AAA-SUB-02", path: "/AAA/AAA-SUB/AAA-SUB-02" }
                ]
  }
]

BBB目录下的侧边栏 /vuepress-demo/docs/BBB/sidebar.js

module.exports = [
  { title: "BBB-01", path: "/BBB/BBB-01" },
  { title: "BBB-02", path: "/BBB/BBB-02" },
  { title: "BBB-SUB", path: "/BBB/BBB-SUB/BBB-SUB-01",
        children: [
                    { title: "BBB-SUB-01", path: "/BBB/BBB-SUB/BBB-SUB-01" },
                    { title: "BBB-SUB-02", path: "/BBB/BBB-SUB/BBB-SUB-02" }
                ]
  }
]