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