Vue讀取本地靜態(tài).md并側(cè)邊欄導(dǎo)航跳轉(zhuǎn)、展示.md文件的操作方法
更新時(shí)間：2023年08月10日 16:06:38 作者：心動(dòng)止于人海。
這篇文章主要介紹了Vue讀取本地靜態(tài).md并側(cè)邊欄導(dǎo)航跳轉(zhuǎn)、展示.md文件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
文檔
我的項(xiàng)目需求展示 .md文件 并帶側(cè)邊欄跳轉(zhuǎn)
研究了以上資料
1、首先安裝 text-loader
npm install text-loader
2、修改webpack.base.config.js，我用的cli所以自己加了一個(gè)vue.config.js
module.exports = {
//此部分
configureWebpack: {
module: {
rules: [
{
test: /\.md$/,
use: ["text-loader"]
}
]
}
}
}上面的很符合我的要求 但是項(xiàng)目沒(méi)生效 我只能另想辦法！
3、安裝mavon-editor 既可以解析markdown 又可以編輯
npm install mavon-editor --save
4、在main.js中引入mavon-editor
//全局注冊(cè) import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' //解決編輯器的功能顯示問(wèn)題 Vue.use(mavonEditor)
5、markdown文字解析到頁(yè)面來(lái)，以便展示 .md里的內(nèi)容能夠展示出來(lái)。
<mavon-editor
v-if="machineIsShow"
v-model="machineMDJS"
:editable="false"
:value="machineMDJS"
:subfield="false"
:defaultOpen="'preview'"
:toolbarsFlag="false"
:scrollStyle="true"
:ishljs="true"
:navigation= "true"
style="max-height: 1000px"
/>
<script>
import machineMDJS from '../../../public/static/md/machine/machine.js'
import 'github-markdown-css/github-markdown.css'
import 'highlight.js/styles/github.css'
export default {
name: 'FrontendManageCaseDetails',
components:{
},
data() {
return {
machineMDJS: machineMDJS,
};
},
};
</script>沒(méi)法 我只能把.md文件里面的內(nèi)容放js里面才行 (因?yàn)閠ext-loader不生效)
machine.js
export default `# 機(jī)房門開關(guān) ## 使用流程  ## 模板化端到端示例 模板化訓(xùn)練流程： `
現(xiàn)在 md文件可以展示了 但是圖片出不來(lái)了
最后把圖片或者這個(gè)展示的文件一起放static 靜態(tài)資源目錄下引入 就成功了。。。
在根目錄下面的public下面可以放置靜態(tài)資源，頁(yè)可以將static文件夾放在public目錄下面若放在static下，寫法如下所示：
this.url = '/static/xxx.xlsx'
到此這篇關(guān)于Vue讀取本地靜態(tài).md并側(cè)邊欄導(dǎo)航跳轉(zhuǎn)、展示.md文件的文章就介紹到這了,更多相關(guān)Vue讀取本地靜態(tài).md文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue中使用vue-quill-editor富文本小結(jié)（圖片上傳）
這篇文章主要介紹了詳解vue中使用vue-quill-editor富文本小結(jié)（圖片上傳），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue中的computed和watch都可以監(jiān)聽數(shù)據(jù)變化，但computed主要用于計(jì)算派生屬性，而watch則用于監(jiān)聽特定數(shù)據(jù)變化并執(zhí)行回調(diào)函數(shù)。兩者使用時(shí)需要注意區(qū)別2023-04-04
vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)
這篇文章主要介紹了vue中響應(yīng)式布局如何將字體大小改成自適應(yīng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue使用Less與Scss實(shí)現(xiàn)主題切換方法詳細(xì)講解
目前，在眾多的后臺(tái)管理系統(tǒng)中，換膚功能已是一個(gè)很常見的功能。用戶可以根據(jù)自己的喜好，設(shè)置頁(yè)面的主題，從而實(shí)現(xiàn)個(gè)性化定制。目前，我所了解到的換膚方式，也是我目前所掌握的兩種換膚方式，想同大家一起分享2023-02-02
這篇文章主要介紹了前端必知必會(huì)之Vue?v-if指令的相關(guān)資料,Vue中的條件渲染指令v-if、v-else-if和v-else用于根據(jù)條件動(dòng)態(tài)創(chuàng)建HTML元素,通過(guò)使用比較運(yùn)算符和邏輯運(yùn)算符,可以編寫復(fù)雜的條件邏輯,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了Vue3之狀態(tài)管理器(Pinia)詳解及使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了element-ui查看大圖的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了八種Vue組件間通訊方式合集(推薦)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue相關(guān)配置文件詳解及多環(huán)境配置詳細(xì)步驟
這篇文章主要介紹了vue相關(guān)配置文件詳解及多環(huán)境配置的教程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
一次前端Vue項(xiàng)目國(guó)際化解決方案的實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于前端Vue項(xiàng)目國(guó)際化解決方案的實(shí)戰(zhàn)記錄,以上只是一部分Vue項(xiàng)目開發(fā)中遇到的典型問(wèn)題和解決方案,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07