搭建一个基于 Markdown的文档编辑框架 - vue3 - vuepress （中）

vue3-vuepress

搭建一个基于 Markdown的文档编辑框架 - vue3 - vuepress （中）
gitee:vue3-vuepress

基础配置

1.系统的配置文件

docs > .vuepress > config.ts

import { defineUserConfig, defaultTheme } from 'vuepress'

export default {
  lang: 'zh-CN',
  title: 'VuePress ！',
  description: '加载失败',
  theme: defaultTheme({
    // 主题设置
    logo: '/nm.png',
    repo: 'https://github.com/bobo456123/VuepressDoc.git',
    repoLabel: 'GitHub',
    navbar: require('./config/nav'),
    sidebar: require('./config/sidebar'),
    editLink: false,
    editLinkText: '编辑此页',
    editLinkPattern: '',
    sidebarDepth: 2,
    lastUpdated: true,
    lastUpdatedText: '更新时间',
    contributors: false,
    contributorsText: '贡献者',
    notFound: [
      '这里什么都没有',
      '我们怎么到这来了？',
      '这是一个 404 页面',
      '看起来我们进入了错误的链接',
    ],
    backToHome: '返回首页',

    // a11y
    openInNewWindow: '在新窗口打开',
    toggleDarkMode: '切换夜间模式',
    toggleSidebar: '切换侧边栏',
  }),
}

2.菜单配置

创建两个文件

docs > .vuepress > config > nav.js

module.exports = [
    { text: 'VuePress', link: '/reference/vuepress/one' }, //标题 和 地址(路径跟上第一个文字的路径)
  {
    text: 'Vue',
    children: [
      { text: 'Vue3.x', link: 'https://v3.cn.vuejs.org/' },
      {
        text: 'Element Plus',
        link: 'https://element-plus.gitee.io/zh-CN/guide/design.html',
      },
    ],
  },
]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hBlrnNvS-1666084195028)(/vuepress1.png)]

docs > .vuepress > config > sidebar.js

module.exports = {
  '/reference/vuepress/': require('../../reference/vuepress/sidebar'), // 多个继续后面添加（sidebar、文章的侧边菜单）
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RqaiczX4-1666084195029)(/press2.png)]

3.新建文档书写目录 和文件

docs > reference > vuepress

docs > reference > vuepress > sidebar.md

module.exports = [
  {
    title: 'vuepress',
    collapsable: true,
    children: [
        { text: '第一部分', link: '/reference/vuepress/one' },
        { text: '第二部分', link: '/reference/vuepress/two' },
    ],
  },
]

docs > reference > vuepress > one.md

### one

docs > reference > vuepress > two.md

### two

至此 我们就可以书写笔记文章啦