共计 2418 个字符，预计需要花费 7 分钟才能阅读完成。
作者：Dmitri Pavlutin
译者：前端小智
起源：blog.openreplay
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
HTML 是超文本标记语言的缩写，可能是当今网络上应用最多的标记语言。Markdown 在咱们程序界也是一个必备的技能。咱们能够应用 makrdown 来渲染文本，它实际上是一种更快的写作形式，因为它学习老本很低，不须要把握很多常识就能够开始。如果你的想写博客，甚至想作为技术作家写作时，Markdown 是你首先的写作工具。
本文次要介绍如果在 Vue 中应用 Markdown，废话说了很多了，咱们就这开始按摩。
为什么应用 Marked.js 库
Vue 没有像 React 那么多 MD 的插件。如 markdown-it、Remark.js、marked.js。心愿在将来，会有更多好用的库来反对咱们的 Vue，通过一番调研，我抉择了marked.js，因为它的星星最多，bug 少。
创立我的项目
咱们应用 vue-cli 来创立我的项目，运行如下命令：
vue create marked-example这里咱们抉择最简略的 Vue2 模板创立我的项目，创立完后的我的项目构造如下：
+-- src/i
| +-- assets/
| +-- components
| +-- HelloWorld.vue
| +-- App.vue
| +-- main.js当初咱们在 MD 语法写个题目
<template>
<div>
{{markdown}}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {markdown: "# hello world",};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>运行：
基于下面的代码，咱们心愿 # hello world MD 语法能在 Vue 渲染成 题目。要怎么做呢，这就须要借助 Marked.js 库。
装置 Marked.js
Marked 或 marked.js 是一个低级别的编译器，帮忙咱们将 Markdowns 转换成 HTML。装置一波试试水：
npm install marked而后，在 app.vue 中引入：
import marked from 'marked';渲染 markdown
渲染办法很简略就是把咱们的文本传入 marked，后果返回是带了标签的文本内容，咱们在用 v-html 渲染即可。
<template>
<!-- {{markdown}} -->
<textarea v-model="markdown"></textarea>
<div v-html="markdownToHtml"></div>
</template>
<script>
import marked from 'marked';
export default {
name: 'App',
data(){
return {markdown: "# Hello World",};
},
computed: {markdownToHtml(){return marked(this.markdown);
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>这里咱们多写了一个 textarea 标签，而后用了计算属性来实时的渲染 markdowns。运行后的后果如下
而后，多输出 一些 MD 语法验证一下：
全局引入
当咱们不想每个组件都 引入一次时，就能够申明成全局的。怎么做？
实现 marked 库全局化的办法是应用 Mixins。Mixins 只是 Vue 组件中可重复使用的性能的一个散布。
重构一下咱们的 main.js 代码，如下所示：
import {createApp} from 'vue';
import App from './App.vue';
import marked from 'marked';
const markedMixin = {
methods: {md: function (input) {return marked (input);
},
},
};
createApp(App).mixin(markedMixin).mount('#app')当想转换 md 时，间接在组件中调用 this.md 就能够将 md 转成 html 了。
~ 完，本文内容很简略，因为最近也用到相似的性能，搜寻这个库，所以就分享一下，我是刷碗智，
当初回家做饭去了，咱们下期再见！
原谅：https://blog.openreplay.com/h…
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。
