HowtoParseandRenderMarkdowninVue

作者：DmitriPavlutin译者：前端小智来源：博客。智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。HTML是超文本标记语言的缩写，可能是当今网络上使用最多的标记语言。Markdown也是我们编程世界中必不可少的技能。我们可以使用makrdown来渲染文本，它实际上是一种更快的编写方式，因为它学习起来很便宜，而且不需要很多知识就可以上手。如果你想写博客，甚至作为技术作家写作，Markdown是你的第一个写作工具。本文主要介绍如果在Vue中使用Markdown，废话一大堆，下面开始按摩。为什么使用Marked.js库Vue没有React多的MD插件。比如markdown-it、Remark.js、marked.js。希望以后能有更多好用的库来支持我们的Vue。经过一番研究，我选择了marked.js，因为它的star最多，bug也很少。创建项目我们使用vue-cli创建项目，运行如下命令：vuecreatemarked-example这里我们选择最简单的Vue2模板创建项目，创建后的项目结构如下：+--src/i|+--资产/|+--组件|+--HelloWorld.vue|+--应用程序.vue|+--main.js现在我们用MD语法写一个标题运行：基于以上代码，我们希望#helloworldMD语法可以在Vue中渲染为标题。如何做到这一点需要Marked.js库的帮助。安装Marked.jsMarked或marked.js是一个低级编译器，可以帮助我们将Markdowns转换为HTML。安装一波试水：npminstallmarked然后在app.vue中引入：importmarkedfrom'marked';Rendermarkdown渲染方式很简单，只需要将我们的文本传入marked，结果返回带有label的文本内容，我们就可以使用v-html进行渲染。这里我们写了一个额外的textarea标签，然后使用计算属性实时渲染降价。运行后的结果如下然后，再输入一些MD语法来验证：globalimport当我们不想每个组件都导入一次时，我们可以声明为全局的。怎么做？使标记库全局化的方法是使用Mixins。Mixin只是Vue组件中可重用功能的一种分布。重构我们的main.js代码如下：import{createApp}from'vue';从'./App.vue'导入应用程序；从“标记”导入标记；constmarkedMixin={方法：{md：函数（输入）{返回标记（输入）；},},};createApp(App).mixin(markedMixin).mount('#app')想转换md的时候直接在组件中调用this.md将md转html即可。~完了，这篇文章的内容很简单，因为最近用了一个类似的功能搜索这个库，所以分享一下。我是投球手，我现在要回家做饭了。下次见！见谅：https://blog.openreplay.com/h...代码部署后可能出现的bug无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便在这里给大家推荐一款好用的BUG监控工具Fundebug。交流文章每周更新。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi。我的文档发表了很多，欢迎Star和完善，可以参考考试中心面试复习，关注公众号，后台会回复福利，福利可以看到，你知道。