<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        vue-cli3項目展示本地Markdown文件的方法

        來源:懂視網 責編:小采 時間:2020-11-27 21:55:31
        文檔

        vue-cli3項目展示本地Markdown文件的方法

        vue-cli3項目展示本地Markdown文件的方法:【版本】 vue-cli3 webpack@4.33.0 【步驟】1、安裝插件vue-markdown-loader npm i vue-markdown-loader -D ps:這個插件是基于markdown-it的,不需要單獨安裝markdown-it。 2、修改vue.config.js配置文件(如果沒有,在項目根
        推薦度:
        導讀vue-cli3項目展示本地Markdown文件的方法:【版本】 vue-cli3 webpack@4.33.0 【步驟】1、安裝插件vue-markdown-loader npm i vue-markdown-loader -D ps:這個插件是基于markdown-it的,不需要單獨安裝markdown-it。 2、修改vue.config.js配置文件(如果沒有,在項目根

        得到的結果并不讓我滿意:

        折騰了大半天才發現,這是由于標題的#井號和文字之間沒有空格導致的。證明見下:

        var MarkdownIt = require('markdown-it'),
        md = new MarkdownIt();
        console.log(md.render('# markdown-it rulezz!'))//<h1>markdown-it rulezz!</h1>
        console.log(md.render('#markdown-it rulezz!'))//<p>#markdown-it rulezz!</p>
        

        Fine :)

        愚蠢的我想出了一個解決辦法:

        因為HyperDown.js能避免上面那樣的情況,于是我用它來對文檔做預處理。

        安裝HyperDown.js

        npm install hyperdown -D
        

        然后把vue.config.js改成了這樣。

        let HyperDown = require('hyperdown');
        let parser = new HyperDown;
        
        module.exports = {
         chainWebpack: config => {
         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({
         // markdown-it config
         preset: 'default',
         breaks: true,
         raw: true,
         typographer: true,
         preprocess: function(markdownIt, source) {
         return parser.makeHtml(source);//重點在這里!!!
         }
         })
         }
        }
        

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        vue-cli3項目展示本地Markdown文件的方法

        vue-cli3項目展示本地Markdown文件的方法:【版本】 vue-cli3 webpack@4.33.0 【步驟】1、安裝插件vue-markdown-loader npm i vue-markdown-loader -D ps:這個插件是基于markdown-it的,不需要單獨安裝markdown-it。 2、修改vue.config.js配置文件(如果沒有,在項目根
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲精品成人片在线观看| 成人永久福利免费观看| 亚洲女同成av人片在线观看| 一级白嫩美女毛片免费| 亚洲精品国产福利一二区| 美女被免费视频网站| 亚洲天堂免费在线视频| 中文字幕高清免费不卡视频| 亚洲国产精品va在线播放| 久9这里精品免费视频| 亚洲国产精品xo在线观看| 久久久久国产精品免费免费搜索| 亚洲五月综合缴情婷婷| 日本无卡码免费一区二区三区| 午夜亚洲乱码伦小说区69堂| 亚洲人午夜射精精品日韩| 国产一级淫片a免费播放口| 久久综合亚洲色HEZYO社区 | 亚洲Av熟妇高潮30p| 久久午夜羞羞影院免费观看 | 亚洲精品无码日韩国产不卡av| 色吊丝永久在线观看最新免费| 在线91精品亚洲网站精品成人| 久久99亚洲综合精品首页| 99久久人妻精品免费一区| 亚洲日本VA中文字幕久久道具| 少妇亚洲免费精品| 无码成A毛片免费| 亚洲AV无码精品蜜桃| 亚洲成AⅤ人影院在线观看| 国产精品免费无遮挡无码永久视频 | 8090在线观看免费观看| 亚洲三级在线观看| 国产亚洲自拍一区| 67194国产精品免费观看| 亚洲AV无码男人的天堂| 亚洲va久久久噜噜噜久久男同| 无人在线直播免费观看| 特级毛片全部免费播放| 亚洲AV无码国产丝袜在线观看| 免费看美女被靠到爽的视频|