vue-markdown,vue-markdown-loader
这篇文章主要介绍了某视频剪辑软件单页面应用中如何实现降价渲染，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
之前渲染降价的时候，笔者使用的是mavonEditor的预览模式，使用起来比较爽，只需要引入组件即可，但是在最近的开发中，遇到了困难。
主要问题在于作为单页面应用，站内链接必须是使用路由器链接跳转，如果使用mavonEditor默认渲染的a标签，就会重新加载页面，用户体验较差。
动态渲染
想要实现在前端动态地根据用户内容渲染路由器链接，需要使用动态渲染，根据官方文档，直接修改vue。配置。射流研究…即可：
//vue.config.js
模块。导出={
runtimeCompiler: true
}
渲染 Markdown
笔者使用的是减价出售，配置过程如下：
安装
新公共管理安装降价保存#本体
新公共管理安装markdown-it-highlightjs - save #代码高亮
新公共管理安装markdown-it-katex - save #乳胶支持
这里还另外安装了两个语法插件，如果有其他需要的话，可以在新公共管理上搜索
静态文件导入
高亮显示。射流研究…
通过内容交付网络导入，在index.html中加入：
link rel=样式表 href=//cdn。jsdelivr。net/GH/高亮js/cdn-release @ 10。5 .0/生成/样式/默认。量滴CSS rel=外部无跟随
脚本src=//cdn。jsdelivr。net/GH/高亮js/cdn-release @ 10。5 .0/生成/突出显示。量滴js /脚本
github-markdown-css
减价的样式
安装
新公共管理安装github-markdown-css -保存
导入
在主页。射流研究…文件中添加
导入CSS/github-markdown。 CSS
katex
通过内容交付网络导入，在index.html中加入：
link rel=样式表 href= https://cdnjs。云层耀斑。com/Ajax/libs/KaTeX/0。5 .1/KaTeX。量滴CSS rel=外部无跟随
使用
首先在成分目录下创建Markdown.vue文件，
模板
组件：is= html class= markdown-body /组件
/模板
脚本
从"减价出售"导入MarkdownIt
从"大减价"导入hljs
从" markdown-it-katex "进口乳胶
导出默认值{
名称：降价，
道具：{
内容：字符串
},
数据：()=({
md:空
}),
计算值：{
//使用计算才能在动态绑定时动态更新
html: function () {
让RES=this。MD . render(这个。内容)
//使用正则表达式将站内链接替换为路由器链接标签
res=res.replace(/a href=(？http:\/\/https:\/\/)(.*?) rel=external nofollow (*?)\/a/g， router-link to= $ 1 $ 2/router-link )
//使用正则表达式将站外链接在新窗口中打开
res=res.replace(/a href=).*?) rel=external nofollow (*?)\/a/g， a href= $ 1 rel= external no follow target= _ blank $ 2/a )
返回{
模板： div res /div
}
}
},
已创建(){
this.md=new MarkdownIt()
这个. md.use(hljs).使用（乳胶)
}
}
/脚本
然后在想使用的地方导入即可
模板
差异
Markdown :content=content/
/div
/模板
脚本
从" @/components/Markdown.vue "导入降价
导出默认值{
姓名：家，
组件：{
降价
},
数据：()=({
内容：""
}),
已创建(){
this.content=#测试
}
}
/脚本
以上就是某视频剪辑软件单页面应用中实现降价渲染的详细内容，更多关于某视频剪辑软件降价渲染的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。