详解vue项目中如何加载markdown
场景
今天忽然临时接到一个需求:
就是将markdown文件直接在vue项目中进行加载,并正常显示出来。
这......,我知道是可以进行加载markdown文件的。
但是我之前没有做过，答复的是:可以做的，但是这个需要一点时间。
领导:那行,你先调研一下。
简单介绍 vue-markdown-loader
vue-markdown-loader可以将 Markdown 文件转换成Vue组件。
安装 npm i vue-markdown-loader -D
步骤1:在vue.config.js文件中去配置
module.exports = {
chainWebpack:config=>{
// 定义一个新的webpack模块规则，命名为md
config.module.rule('md')
// 通过.test()方法，指定这个规则应该匹配哪些文件
// 这个规则将应用于所有以.md结尾的文件，即Markdown文件
.test(/\.md/)
// 使用vue-loader来处理Markdown文件
.use('vue-loader')
.loader('vue-loader')
.end()
// 指定vue-markdown-loader来处理Markdown文件
.use('vue-markdown-loader')
// 使用vue-markdown-loader包中的markdown-compiler模块来处理Markdown文件
.loader('vue-markdown-loader/lib/markdown-compiler')
// raw: true以原始字符串的形式处理Markdown内容，不进行HTML转义等处理。
.options({
raw: true
})
}
}
哦豁-项目启动报错
遇见的问题1:SyntaxError: Unexpected token '??='
产生问题的原因：你的node版本是否太低。
在项目中验证是否支持??=,可以验证一下。太低的话升级版本就行
还有一种可能：less-loader或者sass-loader或者其他的包的版本不对。
遇见的问题2: Syntax Error: TypeError: Cannot read property ‘styles‘ of undefined
产生问题的原因：vue-loader的版本太高造成的。
我的项目是webpack的版本是:webpack5,它对应的vue-loader应该是vue-loader15,
我将它降级为：vue-loader@15
步骤2:在使用的页面
<template>
<div>
<showMarkdown></showMarkdown>
</div>
</template>
<script>
// 引入的
import showMarkdown from './biji.md'
export default {
components:{
showMarkdown
},
data() {
return {
}
}
}
</script>
发现问题:优化样式
我们需要下载 github-markdown-css
npm i github-markdown-css -S
这个是用来优化markdown展示出来的样式
能够保持与GitHub相同的视觉效果
在需要的文件中引入 import 'github-markdown-css';
然后我们在组件的父级使用markdown-body这个类来美化markdown
<template>
<div>
<div class="markdown-body">
<showMarkdown></showMarkdown>
</div>
</div>
</template>
<script>
import 'github-markdown-css';
import showMarkdown from './biji.md'
export default {
components:{
showMarkdown
}
}
</script>
可以把markdown文件在路由中引入吗？
有的小伙伴说:既然我们能够在页面中引入当成组件，
那可以在路由文件中引入嘛？
回答:可以的。下面我们就来看下
const routes = [
{
path: '/',
name: 'Home',
component: ()=>import("../views/echarts.vue")
},
{
path: '/xuexi',
name: 'xuexi',
component: ()=>import("../views/xuexi.vue")
},
{
path: '/md',
name: 'md',
// 引入的md文件
component: ()=>import("../views/biji.md")
},
]
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
main.js中引入 'github-markdown-css';
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//全局引入
import 'github-markdown-css';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
app.vue使用样式
<template>
<div id="app" class="markdown-body">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/echarts">echarts</router-link> |
<router-link to="/art">art</router-link> |
<router-link to="/test">test</router-link> |
<router-link to="/xuexi">xuexi</router-link> |
</div>
<router-view/>
</div>
</template>
发现问题：markdown-body 污染了全局样式
我们发现这样整个项目中都有 markdown-body 这个类了。
这样会影响其他组件的布局样式。
我们只想在引入的文件是md才有这个样式。
其他的文件没有这个样式。
这个是否我们可以在app.vue文件中判断是否是md文件。
如果是md文件我们添加上markdown-body这个类，否则移除。
我们在路由文件中的meta属性来判断是否是md文件类型
路由文件
const routes = [
{
path: '/md',
name: 'md',
component: ()=>import("../views/biji.md"),
meta:{
fileType:'md'
}
},
{
path: '/amd',
name: 'amd',
component: ()=>import("../views/amd.md"),
meta:{
fileType:'md'
}
}
]
app.vue
<template>
<div id="app" :class="componentPathName=='md' ? 'markdown-body' : null">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/echarts">echarts</router-link> |
<router-link to="/art">art</router-link> |
<router-link to="/test">test</router-link> |
<router-link to="/xuexi">xuexi</router-link> |
</div>
<router-view/>
</div>
</template>
<script>
export default {
computed: {
componentPathName () {
return this.$route.meta && this.$route.meta.fileType
}
},
}
</script>
md文件内容有些时候是从服务端获取的
上面我们渲染的都是本地的文件.
如果 markdown 的内容是从服务端获取的。
动态渲染怎么去处理呢？
我们需要下载 vue-markdown
npm install vue-markdown --save
然后在vue.config.js文件中去配置，与上面的配置相同(一样的哈)
vue-markdown
它允许在Vue应用中轻松展示Markdown格式的内容。
它支持标准的Markdown语法。
如标题、列表、链接、图片、代码块等，并能够将Markdown文本解析为HTML格式。
从而在Vue组件中展示。
vue-markdown 的简单使用
<template>
<div>
<VueMarkdown>
{{ mdCont }}
</VueMarkdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components:{
VueMarkdown
},
data() {
return{
mdCont:'#### 绘制一个矩形的思路我们这里绘制矩形\n会使用到canvas.strokeRect(x,y, w, h)方法绘制一个描边矩形'
}
}
}
</script>
远端请求的内容为啥渲染失败
<template>
<div>
<VueMarkdown>
{{ mdCont }}
</VueMarkdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components:{
VueMarkdown
},
data() {
return{
mdCont:'', //返回来的内容
showKey: '0',
}
},
created(){
this.serveAPi()
},
methods:{
serveAPi(){
setTimeout(() => {
this.mdCont = '#### 绘制一个矩形的思路我们这里绘制矩形\n会使用到canvas.strokeRect(x,y, w, h)方法绘制一个描边矩形'
//更新设置这个key值
this.showKey = new Date().getTime()+ ''
},400)
}
},
}
</script>
我们发现md无法正常渲染，但是直接写在data中的是可以渲染的。
说明返回来的数据，在渲染的时候组件没有重新更新。
我们只需要使用key更新更新一下就行了。
远端请求内容渲染markdown,key更新组件
<template>
<div>
<!-- 更新渲染这个组件，要不然返回来的数据无法正常渲染 -->
<VueMarkdown :key="showKey">
{{ mdCont }}
</VueMarkdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components:{
VueMarkdown
},
data() {
return{
mdCont:'', //返回来的内容
showKey: '0',
}
},
created(){
this.serveAPi()
},
methods:{
serveAPi(){
setTimeout(() => {
this.mdCont = '#### 绘制一个矩形的思路我们这里绘制矩形\n会使用到canvas.strokeRect(x,y, w, h)方法绘制一个描边矩形'
//更新设置这个key值
this.showKey = new Date().getTime()+ ''
},400)
}
},
}
</script>
到此这篇关于详解vue项目中如何加载markdown的文章就介绍到这了,更多相关vue加载markdown内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue不同项目之间传递、接收参数问题,主要针对是登录操作，我们为了完成SSO(Single Sign On)的效果，认证和授权在UC完成，用户发起资源请求，服务网关会进行过滤，本文给大家介绍的非常详细，需要的朋友可以参考下2023-04-04
Vue 中的数据绑定和模板渲染都是异步的，那么如何在更新完成后执行回调函数呢？这就需要用到 Vue 的 nextTick 方法了，本文详细介绍了Vue2和Vue3的nextTick实现原理，感兴趣的同学可以参考一下2023-04-04
vue+element ui el-tooltip动态显示隐藏问题
这篇文章主要介绍了vue+element ui el-tooltip动态显示隐藏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇在vue中阻止浏览器后退的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了解决Antd 里面的select 选择框联动触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue3基于script setup语法$refs的使用，<BR> 在用vue3开发项目的时候，需要调用子组件的方法，于是想着用$refs来实现，但是我是使用script setup语法糖，原先vue2的语法已经不适用了。下面我们一起进入文章看详细内容吧</P><P>2021-12-12
这篇文章主要介绍了Vue组件的层级关系，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
Ruoyi-Vue处理跨域问题同时请求多个域名接口(前端处理方法)
跨域问题一直都是很多人比较困扰的问题,这篇文章主要给大家介绍了关于Ruoyi-Vue处理跨域问题同时请求多个域名接口的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了解读Vue实例的属性及模板渲染问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue+element 模态框表格形式的可编辑表单实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
最新评论