vuepress的markdown中引入vue单文件组件
2023-09-11 14:17:27 时间
前言
有这个需求,需要封装一些组件 在markdown中使用。
找遍官方文档发现没有,顶多也就支持可以在md里定义<script setup>
将md作为一个vue组件去使用 Markdown 与 Vue SFC,但是这无满足我的需求。
最后发现官方提供了一个plugin-register-components插件,可以支持此需求
安装
yarn add --dev @vuepress/plugin-register-components@next
使用
vue组件放在这个位置
你的项目
|---docs
|---vuepress
|---components
配置文件启用此插件
const { registerComponentsPlugin } = require('@vuepress/plugin-register-components')
module.exports = {
plugins: [
registerComponentsPlugin({
// 配置项
componentsDir: path.resolve(__dirname, './components'),
}),
],
}
进阶
vue单文件组件获取md信息
如上引入的这个单文件组件,如何获得当前md的文件信息呢。如下即可
<script setup>
import { usePageData } from "@vuepress/client";
const pageData = usePageData();
console.log(pageData);
</script>
<template>你好世界</template>
usePageData是vuepress提供的一个钩子,隶属于客户端api中,更多细节可以去看它的官方文档
通过客户端配置文件 注册vue单文件组件
除了上边说的 通过客户端配置文件也可以注册全局vue组件 提供md使用
├─ docs
│ ├─ .vuepress
│ │ ├─ client.js <--- 客户端配置文件
│ │ └─ config.js <--- 配置文件
│ └─ README.md
├─ .gitignore
└─ package.json
客户端配置文件里增加如下代码
import { defineClientConfig } from '@vuepress/client'
import MyComponent from './MyComponent.vue'
export default defineClientConfig({
enhance({ app }) {
app.component('MyComponent', MyComponent)
},
})
tips: 除了全局的客户端配置文件
,插件和主题都可以通过clientConfigFile属性来设置配置客户端
相关文章
- import Vue from 'vue';
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- 【Vue】vue中VM的生命周期及加载和销毁实例
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Node+TS+Koa+vue 商城全栈(三) sequelize 创建种子文件
- Vue Router 路由实现原理
- Vue 文件流转换为图片在前端显示
- vue中bus.$on事件被多次绑定
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- Vue+Echarts监控大屏实例五:呼叫中心监控模板实例
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue学习笔记四:Jquery VS Vue之元素操作明细对照
- vue学习笔记三:Jquery VS Vue之差异比较概览
- Vue中移动端的适配
- vue之v-for使用说明
- Vue实现页面长时间不操作自动退出
- SpringBoot+Vue实现的文件管理系统 附带详细运行指导视频
- Django+Vue项目学习第九篇:vue项目部署到服务器
- Vue学习第16天——全局事件总线$bus的理解
- Vue学习第13天——vue中使用自定义插件
- Vue开发实例目录总索引
- Vue.js 样式绑定
- Vue for循环 例子