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 = falseVue.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>
页:
[1]