詳解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)文章
這篇文章主要介紹了Vue2和Vue3的10種組件通信方式梳理，本文將通過選項(xiàng)式API?組合式API以及setup三種不同實(shí)現(xiàn)方式全面介紹Vue2和Vue3的組件通信方式，需要的朋友可以參考一下2022-08-08
部署Vue項(xiàng)目到服務(wù)器后404錯(cuò)誤的原因及解決方案
文章介紹了Vue項(xiàng)目部署步驟以及404錯(cuò)誤的解決方案,部署步驟包括構(gòu)建項(xiàng)目、上傳文件、配置Web服務(wù)器、重啟Nginx和訪問域名,404錯(cuò)誤通常是由于歷史模式問題導(dǎo)致的,解決方法是修改Nginx配置,將所有頁面請求重定向到index.html,并在Vue應(yīng)用中覆蓋所有路由情況2025-02-02
這篇文章主要介紹了Vue如何下載本地靜態(tài)資源static文件夾，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
完美解決vue中報(bào)錯(cuò)?“TypeError:?Cannot?read?properties?of?null?
這篇文章主要介紹了完美解決vue中報(bào)錯(cuò)?“TypeError:?Cannot?read?properties?of?null?(reading?‘forEach‘)“,本文給大家分享詳細(xì)解決方案，需要的朋友可以參考下2023-02-02
這篇文章主要為大家介紹了vue element plus多語言切換，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
本篇文章主要介紹了詳解vue-cli多頁面工程實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
vuex + keep-alive實(shí)現(xiàn)tab標(biāo)簽頁面緩存功能
這篇文章主要介紹了vuex + keep-alive實(shí)現(xiàn)tab標(biāo)簽頁面緩存功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
無論是Vue還是React，都有組件的概念。組件，就是能和別人組合在一起的物件。在前端頁面開發(fā)過程中，將一個(gè)頁面劃分成一個(gè)個(gè)小的模塊，每個(gè)模塊單獨(dú)定義，每個(gè)模塊就是一個(gè)組件。組件可以進(jìn)行復(fù)用，A頁面和B頁面有一個(gè)相似的模塊，可以抽離成一個(gè)可局部修改的組件。2021-05-05
nextTick是Vue提供的一個(gè)全局API，由于Vue的異步更新策略導(dǎo)致我們對數(shù)據(jù)的修改不會(huì)立刻體現(xiàn)，在DOM變化上，此時(shí)如果想要立即獲取更新后的DOM狀態(tài)，就需要使用這個(gè)方法，這篇文章主要介紹了解析VUE中nextTick,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了淺析vue中的組件傳值，文章基于vue的相關(guān)資料展開對主題的詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04