从品牌网站建设到网络营销策划,从策略到执行的一站式服务
使用Vue怎么在线运行markdown文档?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
成都创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,微信小程序开发,十余年建站对成都白乌鱼等多个方面,拥有丰富的网站维护经验。
安装
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 } }
组件的用法
参数说明
参数 | 值 | 默认值 | 说明 |
---|---|---|---|
: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-runHello, {{name}}! 你可以点击试试
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图