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>
