快捷導(dǎo)航

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à)值,需要的朋友可以參考下

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ī)房門(mén)開(kāi)關(guān)
## 使用流程
![](./static/md/machine/media/a701685c7ef86716224a7fd3fd9d9168.png)
## 模板化端到端示例
模板化訓(xùn)練流程：
`

現(xiàn)在 md文件可以展示了但是圖片出不來(lái)了

最后把圖片或者這個(gè)展示的文件一起放static 靜態(tài)資源目錄下引入就成功了。。。

在根目錄下面的public下面可以放置靜態(tài)資源，頁(yè)可以將static文件夾放在public目錄下面若放在static下，寫(xiě)法如下所示：

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: