Vuepress使用vue组件实现页面改造

yarn add @vuepress/plugin-register-components@next
// 或者
npm i -D @vuepress/plugin-register-components@next

const { registerComponentsPlugin } = require('@vuepress/plugin-register-components')
module.exports = {
  plugins: [
    registerComponentsPlugin({
      // 配置项
    }),
  ],
}

const path = require("path");
const { defaultTheme } = require('vuepress');
const { docsearchPlugin } = require('@vuepress/plugin-docsearch')
// ======================引入插件====================================
const { registerComponentsPlugin } = require('@vuepress/plugin-register-components')
// ======================引入插件 End================================
const navbar = require('./navbar');
const sidebar = require('./sidebar');
module.exports = {
  base: '/',
  lang: 'zh-CN',
  title: '前端技术栈',
  description: '前端白皮书',
  head: [
    ['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }]
  ],
  alias: {
    '@pub': path.resolve(__dirname, './public'),
  },
  markdown: {
    importCode: {
      handleImportPath: (str) =>
          str.replace(/^@src/, path.resolve(__dirname, 'src')),
    },
    extractTitle: true
  },
  // ======================配置插件====================================
  plugins: [
    registerComponentsPlugin({
      // 配置项
      componentsDir: path.resolve(__dirname, './components')
    })
  ],
  // ======================配置插件 End=================================
  theme: defaultTheme({
    // URL
    logo: 'https://vuejs.org/images/logo.png',
    // 顶部导航
    navbar: navbar,
    // 侧边栏
    sidebar: sidebar,
    sidebarDepth: 2, // e'b将同时提取markdown中h2 和 h3 标题，显示在侧边栏上。
    lastUpdated: true // 文档更新时间：每个文件git最后提交的时间
  })
}

├─.vuepress
│  └─ components
│  │  └─ Card.vue
│  └─ config
│  │  └─ navbar.js
│  │  └─ sidebar.js
│  └─ public
│  │  └─ images
│  └─ config.js

<template>
  <div class="g-card-link">
    <div v-for="(item,k) in value" class="g-card-item" :key="k">
      <a :href="item.link" rel="external nofollow"  target="_blank" :title="item.title">{{item.title}}</a>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps } from 'vue';
const props = defineProps({
  defaultValue:String
})
const value = ref(props.defaultValue);
</script>
<style lang="scss">
button {background-color: #4e6ef2}
.g-card-link {
  display: flex;
  flex-wrap: wrap;
  gap:10px;
  text-align: center;
  line-height: 38px;
  .g-card-item {
    background: blue;
    width: 113px;
    max-width: 138px;
    height: 38px;
    cursor: pointer;
    overflow: hidden;
  }
  .g-card-item:nth-of-type(2n) {
    background: rgba(44,104,255,.1);
  }
  .g-card-item:nth-of-type(2n+1) {
    background: rgba(56, 203, 137, .1);
  }
}
</style>

---
data: 2022-06-14
lang: zh-CN
title: Docs 常用文档
description: 收集常用的文档
---
# Docs
收集精编常用的文档...
<div v-for="(item,k) in linkList">
    <h3>{{item.title}}</h3>
    <div>
        <card :defaultValue="item.children"/>
    </div>
</div>
<script setup>
import { ref } from 'vue';
const linkList = ref([]);
linkList.value = [
    {
        title: 'React UI 组件库',
        children: [
            {
                title: 'Ant Design',
                link: 'https://ant.design/docs/react/introduce-cn'
            },{
                title: 'Bootstrap',
                link: 'https://react-bootstrap.github.io/getting-started/introduction'
            },{
                title: 'Material UI',
                link: 'https://mui.com/material-ui/getting-started/overview/'
            }
        ]
    },{
        title: 'Vue UI 组件库',
        children: [
            {
                title: 'Element',
                link: 'https://element.eleme.io/#/zh-CN/component/installation'
            },{
                title: 'Element Plus',
                link: 'https://element-plus.org/zh-CN/component/button.html'
            },{
                title: 'Vant',
                link: 'https://youzan.github.io/vant/#/zh-CN'
            },{
                title: 'View Design',
                link: 'https://www.iviewui.com/view-ui-plus/guide/introduce'
            }
        ]
    },
    {
        title: '动画库',
        children: [
            {
                title: 'Animate.css',
                link: 'https://animate.style/'
            }
        ]
    }
]
</script>