实现Vue的markdown文档可以在线运行的方法示例

更新时间：2018年12月11日 08:08:09 作者：zhanglearning

这篇文章主要介绍了实现Vue的markdown文档可以在线运行的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

markdown 文档中Vue代码可执行啦，而且可以边看边执行。这样就可以用markdown文档的形式，写自己的Vue博客了，可以方便介绍自己的原创组件，很酷的执行。

Github

https://github.com/zhangKunUserGit/vue-markdown-run

DEMO

https://zhangkunusergit.github.io/vue-markdown-run/dist/

安装

npm install vue-markdown-run --save

用法

(1)完整引入

// 引入
import MarkdownRun from 'vue-markdown-run';
// 全局注入
Vue.use(MarkdownRun);

(2)按需引入

借助 babel-plugin-component ，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -save-dev

然后，将 .babelrc 修改为：

{
 "plugins": [
  [
   "component",
   {
    "libraryName": "vue-markdown-run",
    "styleLibraryName": "theme"
   }
  ]
 ]
}

接下来，如果你只需引入部分组件，写入以下内容：

import { MarkdownRun } from 'vue-markdown-run';

export default {
 components: {
  MarkdownRun
 }
}

组件的用法

 <markdown-run
  :mark="markdownTxt"
  highlight-style-file-name="github"
  :runClass=""
  :runStyle=""
  @error=""
 />

参数说明

参数	值	默认值	说明
:mark	必传(String)	无	markdown文本字符串(具体要求请看下面的“markdownTxt 写法要求”)
:scope	非(Object)	无	markdown文本中，引入的组件，如果不想全局引入，可以局部引入，用法请看上面的DEMO
highlight-style-file-name	非(String)	'github'	markdown代码部分样式文件名，此处是指定引入那种样式（css）文件详细请参考：https://highlightjs.org/stati... 中Styles
:runClass	非(String)	无	Vue运行代码处的css样式名称
:runStyle	非(Object)	无	Vue运行代码处的行间样式名称
@error	非(Function)	无	当前组件执行失败的回调函数

markdownTxt 写法要求

代码中必须指定哪个组件是需要执行的，在上面写上 vue-run , 否则认为是普通文本，不予执行。

vue-run 放在语言类型后面，需要空格，例如：

```html vue-run
<template>
 <div @click="go">Hello, {{name}}! 你可以点击试试</div>
</template>

<script>
 export default {
  data() {
   return {
    name: 'Vue'
   }
  },
 methods: {
   go () {
    alert('点击弹出， 代码vue已执行');
   }
  }
 }
</script>
<style>
 div{
 background-color: red;
 }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue3自定义hooks/可组合函数方式
这篇文章主要介绍了vue3自定义hooks/可组合函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue修改Dom不生效的解决
这篇文章主要介绍了Vue修改Dom不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
Vue3动态倒计时的代码实现
在使用Vue框架开发Web应用时,倒计时功能是一个常见的需求,它可以在一定时间内重复执行某些操作,比如防止用户重复提交表单、限制投票次数、实现验证码获取等功能,所以本文给大家介绍了Vue3动态倒计时的代码实现,需要的朋友可以参考下
2024-09-09
Vue实现列表跑马灯效果
这篇文章主要为大家详细介绍了Vue实现列表跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue3中的ref和reactive定义数组方式
这篇文章主要介绍了vue3中的ref和reactive定义数组方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
JS 实现获取对象属性个数的方法小结
这篇文章主要介绍了JS 实现获取对象属性个数的方法,结合实例形式总结分析了JS 获取对象属性个数的三种常用方法,需要的朋友可以参考下
2023-05-05
如何使用 vxe-table 实现左边是树右边是表格联动功能
使用 vxe-table 来实现左边是树,右边是表格联动功能,当需要实现左右两侧联动时,表格 vxe-grid 配合分割模板 vxe-split 就很容易实现了,下面通过实例代码给大家介绍使用 vxe-table 来实现左边是树,右边是表格联动功能,感兴趣的朋友一起看看吧
2025-03-03
Vue2.0+ElementUI实现查询条件展开和收起功能组件(代码示例)
文章介绍了如何将查询条件表单封装成一个通用组件,以提高开发效率,组件支持多条件的折叠和展开功能,并提供了使用示例,感兴趣的朋友一起看看吧
2025-01-01
vue：左右过渡展开折叠的组件
在网上找了好久关于左右过渡动画折叠的组件,没有合适的代码,效果类似于element UI中的Drawer抽屉组件,只不过ele中的都是悬浮的组件,工作中遇到的很多都是占用空间的展开折叠,网上很多也是上下展开收起的组件,于是就自己写了一个,分享给大家,感兴趣的朋友参考下吧
2023-11-11
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08

实现Vue的markdown文档可以在线运行的方法示例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具