詳解vue項(xiàng)目中如何加載markdown
場景
今天忽然臨時(shí)接到一個(gè)需求:
就是將markdown文件直接在vue項(xiàng)目中進(jìn)行加載,并正常顯示出來。
這......,我知道是可以進(jìn)行加載markdown文件的。
但是我之前沒有做過，答復(fù)的是:可以做的，但是這個(gè)需要一點(diǎn)時(shí)間。
領(lǐng)導(dǎo):那行,你先調(diào)研一下。
簡單介紹 vue-markdown-loader
vue-markdown-loader可以將 Markdown 文件轉(zhuǎn)換成Vue組件。
安裝 npm i vue-markdown-loader -D
步驟1:在vue.config.js文件中去配置
module.exports = {
chainWebpack:config=>{
// 定義一個(gè)新的webpack模塊規(guī)則，命名為md
config.module.rule('md')
// 通過.test()方法，指定這個(gè)規(guī)則應(yīng)該匹配哪些文件
// 這個(gè)規(guī)則將應(yīng)用于所有以.md結(jié)尾的文件，即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內(nèi)容，不進(jìn)行HTML轉(zhuǎn)義等處理。
.options({
raw: true
})
}
}
哦豁-項(xiàng)目啟動(dòng)報(bào)錯(cuò)
遇見的問題1:SyntaxError: Unexpected token '??='
產(chǎn)生問題的原因：你的node版本是否太低。
在項(xiàng)目中驗(yàn)證是否支持??=,可以驗(yàn)證一下。太低的話升級版本就行
還有一種可能：less-loader或者sass-loader或者其他的包的版本不對。
遇見的問題2: Syntax Error: TypeError: Cannot read property ‘styles‘ of undefined
產(chǎn)生問題的原因：vue-loader的版本太高造成的。
我的項(xiàng)目是webpack的版本是:webpack5,它對應(yīng)的vue-loader應(yīng)該是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>
發(fā)現(xiàn)問題:優(yōu)化樣式
我們需要下載 github-markdown-css
npm i github-markdown-css -S
這個(gè)是用來優(yōu)化markdown展示出來的樣式
能夠保持與GitHub相同的視覺效果
在需要的文件中引入 import 'github-markdown-css';
然后我們在組件的父級使用markdown-body這個(gè)類來美化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文件在路由中引入嗎？
有的小伙伴說:既然我們能夠在頁面中引入當(dāng)成組件，
那可以在路由文件中引入嘛？
回答:可以的。下面我們就來看下
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>
發(fā)現(xiàn)問題：markdown-body 污染了全局樣式
我們發(fā)現(xiàn)這樣整個(gè)項(xiàng)目中都有 markdown-body 這個(gè)類了。
這樣會(huì)影響其他組件的布局樣式。
我們只想在引入的文件是md才有這個(gè)樣式。
其他的文件沒有這個(gè)樣式。
這個(gè)是否我們可以在app.vue文件中判斷是否是md文件。
如果是md文件我們添加上markdown-body這個(gè)類，否則移除。
我們在路由文件中的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文件內(nèi)容有些時(shí)候是從服務(wù)端獲取的
上面我們渲染的都是本地的文件.
如果 markdown 的內(nèi)容是從服務(wù)端獲取的。
動(dòng)態(tài)渲染怎么去處理呢？
我們需要下載 vue-markdown
npm install vue-markdown --save
然后在vue.config.js文件中去配置，與上面的配置相同(一樣的哈)
vue-markdown
它允許在Vue應(yīng)用中輕松展示Markdown格式的內(nèi)容。
它支持標(biāo)準(zhǔn)的Markdown語法。
如標(biāo)題、列表、鏈接、圖片、代碼塊等，并能夠?qū)arkdown文本解析為HTML格式。
從而在Vue組件中展示。
vue-markdown 的簡單使用
<template>
<div>
<VueMarkdown>
{{ mdCont }}
</VueMarkdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components:{
VueMarkdown
},
data() {
return{
mdCont:'#### 繪制一個(gè)矩形的思路我們這里繪制矩形\n會(huì)使用到canvas.strokeRect(x,y, w, h)方法繪制一個(gè)描邊矩形'
}
}
}
</script>
遠(yuǎn)端請求的內(nèi)容為啥渲染失敗
<template>
<div>
<VueMarkdown>
{{ mdCont }}
</VueMarkdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components:{
VueMarkdown
},
data() {
return{
mdCont:'', //返回來的內(nèi)容
showKey: '0',
}
},
created(){
this.serveAPi()
},
methods:{
serveAPi(){
setTimeout(() => {
this.mdCont = '#### 繪制一個(gè)矩形的思路我們這里繪制矩形\n會(huì)使用到canvas.strokeRect(x,y, w, h)方法繪制一個(gè)描邊矩形'
//更新設(shè)置這個(gè)key值
this.showKey = new Date().getTime()+ ''
},400)
}
},
}
</script>
我們發(fā)現(xiàn)md無法正常渲染，但是直接寫在data中的是可以渲染的。
說明返回來的數(shù)據(jù)，在渲染的時(shí)候組件沒有重新更新。
我們只需要使用key更新更新一下就行了。
遠(yuǎn)端請求內(nèi)容渲染markdown,key更新組件
<template>
<div>
<!-- 更新渲染這個(gè)組件，要不然返回來的數(shù)據(jù)無法正常渲染 -->
<VueMarkdown :key="showKey">
{{ mdCont }}
</VueMarkdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
export default {
components:{
VueMarkdown
},
data() {
return{
mdCont:'', //返回來的內(nèi)容
showKey: '0',
}
},
created(){
this.serveAPi()
},
methods:{
serveAPi(){
setTimeout(() => {
this.mdCont = '#### 繪制一個(gè)矩形的思路我們這里繪制矩形\n會(huì)使用到canvas.strokeRect(x,y, w, h)方法繪制一個(gè)描邊矩形'
//更新設(shè)置這個(gè)key值
this.showKey = new Date().getTime()+ ''
},400)
}
},
}
</script>
到此這篇關(guān)于詳解vue項(xiàng)目中如何加載markdown的文章就介紹到這了,更多相關(guān)vue加載markdown內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題
這篇文章主要介紹了Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題,主要針對是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認(rèn)證和授權(quán)在UC完成，用戶發(fā)起資源請求，服務(wù)網(wǎng)關(guān)會(huì)進(jìn)行過濾，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-04-04
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的，那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢？這就需要用到 Vue 的 nextTick 方法了，本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理，感興趣的同學(xué)可以參考一下2023-04-04
vue+element ui el-tooltip動(dòng)態(tài)顯示隱藏問題
這篇文章主要介紹了vue+element ui el-tooltip動(dòng)態(tài)顯示隱藏問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇在vue中阻止瀏覽器后退的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動(dòng)觸發(fā)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue3基于script?setup語法$refs的使用，<BR>?在用vue3開發(fā)項(xiàng)目的時(shí)候，需要調(diào)用子組件的方法，于是想著用$refs來實(shí)現(xiàn)，但是我是使用script?setup語法糖，原先vue2的語法已經(jīng)不適用了。下面我們一起進(jìn)入文章看詳細(xì)內(nèi)容吧</P><P>2021-12-12
這篇文章主要介紹了Vue組件的層級關(guān)系，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Ruoyi-Vue處理跨域問題同時(shí)請求多個(gè)域名接口(前端處理方法)
跨域問題一直都是很多人比較困擾的問題,這篇文章主要給大家介紹了關(guān)于Ruoyi-Vue處理跨域問題同時(shí)請求多個(gè)域名接口的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了解讀Vue實(shí)例的屬性及模板渲染問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue+element 模態(tài)框表格形式的可編輯表單實(shí)現(xiàn)
這篇文章主要介紹了vue+element 模態(tài)框表格形式的可編輯表單實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06