快捷導(dǎo)航

Vue讀取本地靜態(tài).md并側(cè)邊欄導(dǎo)航跳轉(zhuǎn)、展示.md文件的操作方法

更新時間：2023年08月10日 16:06:38 作者：心動止于人海。

這篇文章主要介紹了Vue讀取本地靜態(tài).md并側(cè)邊欄導(dǎo)航跳轉(zhuǎn)、展示.md文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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里的內(nè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>

沒法我只能把.md文件里面的內(nèi)容放js里面才行 (因為text-loader不生效)

machine.js

export default `# 機(jī)房門開關(guān)
## 使用流程
![](./static/md/machine/media/a701685c7ef86716224a7fd3fd9d9168.png)
## 模板化端到端示例
模板化訓(xùn)練流程：
`

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

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

在根目錄下面的public下面可以放置靜態(tài)資源，頁可以將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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: