啊哈,又是来推荐一个vuejs的包,miaolz123/vue-markdown。对应的应用场景是:你想使用一个编辑器或者是在评论系统中支持减价。这个包的有点还是挺多了,比如默认就支持emoji,这个就很完美啦! laravist的新版就使用了vue-markdown来渲染评论。
<>强安装
直接使用npm来安装:
npm安装,节省vue-markdown
<强>使用
也是很简单的,可以直接这样:
从“vue-markdown”进口VueMarkdown
新Vue ({
组件:{
VueMarkdown
}
}）
之前
或者是这样,举一个具象化的例子是:比如我们有一个评论。vue组件用来渲染评论,可以在这个组件中直接指明:
从“进口VueMarkdown vue-markdown ';
& lt; template>
& lt; div>
& lt; vue-markdown:源=" comment.body "祝辞& lt;/vue-markdown>
& lt;/div>
& lt;/template>
出口默认{//渌?
道具:“评论”,
数据(){
返回{
备注:this.comment
}
},
组件:{
VueMarkdown
},//渌?
}
之前
然后在渲染的时候这个:
& lt; div类="评论"比;
& lt; div类="评论" v=捌缆燮缆邸北?
& lt;评论:评论="评论"比;
& lt;/comment>
& lt;/div>
& lt;/div>
这里我们首先通过评论道具传入整个评论(这个评论其实就是一个对象),然后在发表评论。vue通过:源来给veu-markdown组件传入每个评论的身体字段内容,注意这里的评论。身体在数据库中保存的就是评论的减价格式的内容。
<强> Vuejs服务器端渲染减价示例
const高雅=要求(“高雅”);
const _=要求(“koa-route”);
const vsr=要求(“vue-server-renderer”);
const fs=要求(fs);
const indexjs=要求(“。/组件/index.js”);
const Vue=要求(Vue);
const MD=要求(“markdown-it”)
const服务器=new高雅();
const路线={
指数:(ctx, id)=比;{//解析减价
const md=new md () .render (fs.readFileSync (”。/减记“+身份证+”。医学博士”、“utf - 8”);//vue插入html代码
const应用=new Vue ({
数据:{
主要:医学博士
},
模板:
& lt; div>
& lt; div类=爸饕眝-html=爸饕弊４? lt;/div>
& lt;/div>
}）;//其他变量设置
const上下文={
htmlTitle: id
};//加载模板html文件
const渲染器=vsr.createRenderer ({
模板:fs.readFileSync('/模板/index.template。html”、“utf - 8”)
}）;//渲染
渲染器。renderToString(应用程序上下文,(呃,html)=比;{
如果(err) {
ctx.response。状态=500;
其他}{
ctx.response。身体=html;
}
}）
}
};
server.use (_。get ('/post/: id, route.index));
server.listen (8080);
之前
& lt; !DOCTYPE html>
& lt; html lang=癈H-ZN”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> {{htmlTitle}} & lt;/title>
& lt;/head>
& lt; body>
& lt; !——vue-ssr-outlet祝辞
& lt;/body>
& lt;/html>
之前
<强>总结
本文介绍的vue-markdown在某些应用场景中其实超级好用,特别是对于评论系统想支持减价这个需求来说,容易集成,优点多多。希望对大家的学习有所帮助,也希望大家多多支持。
