vuepress搭建类element-ui知识平台

最近接到一个任务，要搭建一个自己的学习平台，类似element可以看到组件效果的同时还能查看组件源码，由于时间关系，决定使用第三方插件，于是在网上看了很多类似的技术，最终选了最简单的一种vuepress。我这里是在git上下载的完整项目（也可自行查看官网从头配置），主要是对配置文件进行说明：

Democode.vue组件展示组件，用于组件效果和源码展示

<template>
  <div class="code">
    <div class="code--title">
      <h2>{{title}}</h2>
      <small>{{description}}</small>
    </div>
    <div class="code--demo">
      <div class="code-content">
        <slot></slot>
      </div>
    </div>
    <div v-if="isShow" class="code--segment">
      <slot name="codeText"></slot>
    </div>
    <div v-if="$slots.codeText" class="code--button" @click="handleToggleShow">{{codeTextBtn}}</div>
  </div>
</template>

<script>
export default {
  name: 'DemoPage',
  props: ['title', 'description'],
  data() {
    return {
      isShow: false,
      codeTextBtn: '显示代码'
    }
  },
  methods: {
    handleToggleShow() {
      this.isShow = !this.isShow
      this.codeTextBtn = this.isShow ? '隐藏代码' : '显示代码'
    }
  }
}
</script>

<style lang="less" scoped>
.code {
  .code--title {
    h2 {
      padding: 0;
      margin: 0;
      border-bottom: none;
      font-size: 18px;
    }

    small {
      font-size: 14px;
      display: inline-block;
      margin: 10px 0;
      color: #5e6d82;
    }
  }
  .code--demo {
    border: 1px solid #ebebeb;
    border-bottom: none;
    border-radius: 3px;
    box-shadow: 0 0 2px 0 rgba(232, 237, 250, 0.6),
      0 1px 2px 0 rgba(232, 237, 250, 0.5);
    .code-content {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding: 4%;
      border-bottom: 1px solid #ddd;
    }
  }
  .code--button {
    background: #fafbfc;
    color: #409eff;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
      0 2px 4px 0 rgba(232, 237, 250, 0.5);
    &:hover {
      font-size: 17px;
    }
  }

  & + .code {
    margin-top: 40px;
  }

  &:not(:first-child) {
    margin-top: 40px;
  }
}
</style>

.md文件中使用：

<!-- Common-Democode，Common为components下的组件分类目录，Democode为组件民名称，.md文件中组件使用均已这种形式 -->
<Common-Democode title="背景设置及badge" description="常用背景色设置及badge展示">
  <!-- NtcUi-MyView为要展示的组件前缀分类，my-view2为展示效果代码文件 -->
  <NtcUi-MyView-my-view2></NtcUi-MyView-my-view2>
  <highlight-code slot="codeText" lang="vue">
    <template>
      要展示的组件使用时的代码
    </template>

    <script>
    export default {
      name: 'my-view2',
      data() {
        return {
          
        }
      },
      methods: {

      }
    }
    </script>

    <style scoped>
    .border{
      border: 1px solid #e5e5e5;
    }
    </style>
  </highlight-code>
</Common-Democode>

config.js配置文件

module.exports = {
  head: [
    [
      'link', // 设置 favicon.ico，注意图片放在 public 文件夹下
      {
        rel: 'icon',
        href: 'nt.ico'
      }
    ]
  ],
  title: '数字化能力平台', // 设置网站标题
  base: '/',
  description: '为快速开发，自己研发、封装了一套前后端开发体系', //描述
  dest: './dist', // 设置输出目录
  port: 9960, //端口
  themeConfig: { //主题配置
    logo: '/logo.png', // 注意图片放在 public 文件夹下
    search: true,
    searchPlaceholder: '搜索文档',
    // 添加导航栏
    nav: [{
        text: '主页',
        link: '/'
      }, // 导航条
      {
        text: '前端组件文档',
        link: '/baseComponents/'
      },
      {
        text: '后端知识库',
        link: '/knowledge/'
      },
      {
        text: 'dev and ops',
        link: '/devAndOps/'
      },
    ],
    // 为以下路由添加侧边栏
    sidebar: {
      '/baseComponents/': [{
          title: 'NTC-UI组件(PC)',
          collapsable: true,
          sidebarDepth: 1,
          pageClass: 'custom-page-class',
          children: [{
              title: "my-view",
              path: 'ntcUi/my-view'
            },
           
          ]
        },
       
        {
          title: '二次开发组件',
          collapsable: true,
          children: [{
            title: "ntc-kkfileview 文件预览",
            path: 'reDevelopment/ntc-kkfileview'
          }]
        },
        {
          title: '自定义组件',
          collapsable: true,
          children: []
        },
      ],
      
     
    }
  }
}

enhanceApp.js全局js文件

/**
 * 扩展 VuePress 应用
 */
import VueHighlightJS from 'vue-highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//二维码 及 条形码
import VueBarcode from '@xkeshi/vue-barcode';
import VueQr from 'vue-qr'


import ntcUi from 'my-ui'

import VueECharts from 'vue-echarts' //注册图表
// my-kkfileview文件预览
import ntcKkfileview from 'my-kkfileview';

import '../.vuepress/public/css/font-awesome.css'
import '../.vuepress/styles/my-overwrite.css'

export default ({
  Vue, // VuePress 正在使用的 Vue 构造函数
  options, // 附加到根实例的一些选项
  router, // 当前应用的路由实例
  siteData // 站点元数据
}) => {
  // ...做一些其他的应用级别的优化
  Vue.use(VueHighlightJS)
  Vue.use(Element)
  Vue.use(myUi)
  Vue.use(myKkfileview)
  Vue.component(VueBarcode.name, VueBarcode)
  Vue.component(VueQr.name, VueQr)
  // Vue.use(myTestUi)
  Vue.component('chart', VueECharts)
}

README.md首页.md文件

---
home: true
actionText: 快速上手 →
actionLink: /baseComponents/
---

<div class="my-home-content">
  <a class="base-component" href="/baseComponents/">
    <img style="height:55px;margin-right:15px;" src="/image/baseComponents.png" />
    <div>
      <div style="font-size:18px;color:#333333 !important;margin-bottom:20px;">前端组件</div>
      <div style="font-size:14px;color:#666666 !important;">快速体验组件demo，帮助工程师快速开发</div>
    </div>
  </a>
  <a class="knowledge" href="/knowledge/">
    <img style="height:55px;margin-right:15px;" src="/image/knowledge.png" />
    <div>
      <div style="font-size:18px;color:#333333 !important;margin-bottom:20px;">后端知识库</div>
      <div style="font-size:14px;color:#666666 !important;">后端技术要点及自主研发java组件</div>
    </div>
  </a>
</div>

标签：Vue,title,my,element,ui,vuepress,组件,import,border
来源： https://blog.csdn.net/JiaoKunGe/article/details/118487008