vue項目vue-cli4展示本地markdown語法_md文件，圖文詳細講解

前言/效果

 

 

 配置

第一步，開發安裝vue-markdown-loader和github-markdown-css

npm i vue-markdown-loader -D  //markdown格式
npm i github-markdown-css -S  //markdown樣式

 

 

第二步，配置vue.config.js,支持markdown語法

var path=require('path');
module.exports={
      chainWebpack:config=>{
        config.resolve.alias
          .set('@',path.resolve(__dirname,'src')),
        config.module.rule('md')
          .test(/\.md/)
          .use('vue-loader')
          .loader('vue-loader')
          .end()
          .use('vue-markdown-loader')
          .loader('vue-markdown-loader/lib/markdown-compiler')
          .options({
            raw: true
          })
      },
}

 

 

第三步，在main.js中引入markdown樣式

import 'github-markdown-css';

 

 

第四步，創建一個md文件

 

 

第五步，在需要的組件中引入help.md文件並在瀏覽器中查看，注意class="markdown-body"是對markdown-css的引用，必須要有，不添加該class會導致文件沒有樣式

 

 

 

 

 

 第六步，結果

以上，一個通過vue-cli4創建的vue項目引入markdown就實現了