能否在VuePress的Markdown页面中展示自定义Vue.js组件（如<b-button>）？

Absolutely! VuePress is built on top of Vue.js, so integrating custom Vue components into your Markdown pages is not only possible—it’s one of the framework’s key strengths. Here’s how to make it work, whether you’re using a custom-built component or a third-party one like BootstrapVue’s <b-button>:

1. Global Registration (for components used across multiple pages) #

VuePress has a handy auto-registration feature for components placed in the .vuepress/components directory. Any component here will be globally available in all your Markdown files, no extra setup needed.

Example: Create a custom <b-button> component #

1. Create a file at .vuepress/components/BButton.vue with your component code:

<template>
  <button class="custom-btn" :class="variantClass">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    variant: {
      type: String,
      default: 'primary',
      validator: val => ['primary', 'success', 'danger'].includes(val)
    }
  },
  computed: {
    variantClass() {
      return `btn-${this.variant}`
    }
  }
}
</script>

<style scoped>
.custom-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.btn-primary { background-color: #42b983; }
.btn-success { background-color: #4CAF50; }
.btn-danger { background-color: #f44336; }
</style>

2. Now you can use it directly in any Markdown page:

# My Awesome Page

Here's a custom button:
<b-button variant="danger">Click for Danger!</b-button>

And another one:
<b-button variant="success">Click for Success!</b-button>

2. Local Registration (for components used in a single page) #

If you only need a component on one specific page, you can register it locally using a <script> block at the top of your Markdown file:

<script>
// Import your component
import BButton from './../components/BButton.vue'

export default {
  components: {
    BButton // Register it for this page
  }
}
</script>

# Page with Local Component

<b-button>Local Button Only For This Page</b-button>

3. Using Third-Party Components (like BootstrapVue’s <b-button>) #

If you want to use a pre-built component from a library like BootstrapVue, you need to set up the library in your VuePress config:

1. Install the library first (via npm or yarn):

npm install bootstrap-vue bootstrap
# or
yarn add bootstrap-vue bootstrap

2. Create an enhanceApp.js file in .vuepress/ to initialize the library:

import Vue from 'vue'
import { BootstrapVue, ButtonPlugin } from 'bootstrap-vue'

// Import styles
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Install plugins
Vue.use(BootstrapVue)
Vue.use(ButtonPlugin) // Only needed if you want to use individual component plugins

3. Update your .vuepress/config.js to include the enhance file:

module.exports = {
  enhanceAppFiles: [
    './.vuepress/enhanceApp.js'
  ]
}

4. Now you can use <b-button> (and other BootstrapVue components) in any Markdown page:

# Using BootstrapVue Buttons

<b-button variant="primary">Primary Bootstrap Button</b-button>
<b-button variant="outline-secondary">Outline Secondary Button</b-button>

Quick Notes #

• Component names in Markdown are case-insensitive, but it’s common to use kebab-case (like <b-button>) for consistency.
• Make sure your component props and slots work as expected—VuePress handles them just like a regular Vue app.

Hope this helps you integrate your custom components seamlessly into your VuePress docs!

内容的提问来源于stack exchange，提问作者Jan Moritz