简介

vuepress-plugin-v2-demoblock是基于vuepress2的插件，可以快速的在vuepress2中建立类似element ui的Vue组件示例。

安装

npm install -D vuepress-plugin-v2-demoblock yarn add -D vuepress-plugin-v2-demoblock pnpm add -D vuepress-plugin-v2-demoblock

快速上手

• .vuepress/config.js中引入插件

import vuepressPluginV2Demoblock from 'vuepress-plugin-v2-demoblock';
export default defineUserConfig({
    plugins: [
		vuepressPluginV2Demoblock(),
    ],
})

使用

• markdown文件中直接使用:::自定义容器，然后书写你的代码

::: demo 简介
```vue
<button>{{ name }}</button>
<script>
import { ref, defineComponent } from 'vue';
export default defineComponent({
	setup() {
		const name = ref('我是按钮');
		return {
			name,
		};
	},
});
</script>

:::

• 效果展示：

  

代码分析

Vuepress2 编写自定义组件示例

注意

• 使用自定义的单文件组件时，需要手动注册为vuePress2全局组件，详见注册Vue组件
• 后续会优化成自动引入组件