vue-cli3項目展示本地Markdown文件的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下vue-cli3項目展示本地Markdown文件的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站 - 溫江服務器租用，四川服務器租用，成都服務器租用，四川網(wǎng)通托管,綿陽服務器托管，德陽服務器托管，遂寧服務器托管，綿陽服務器托管，四川云主機，成都云主機，西南云主機，溫江服務器租用，西南服務器托管，四川/成都大帶寬，機柜大帶寬租用·托管，四川老牌ＩＤＣ服務商

【版本】

• 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配置文件（如果沒有，在項目根目錄新建一個）：

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({
    raw: true
   })
 }
}

3、直接上代碼

App.vue

<template>
 <my-markdown></my-markdown>
</template>

<script>
import myMarkdown from './assets/cpu.md';
export default {
 components: {
  myMarkdown
 },
</script>

正常情況下，到這里就結(jié)束了。

【坑】

由于業(yè)務給我的Markdown文檔的標題是這樣的：

##物理CPU個數(shù)
物理CPU數(shù)就是主板上實際插入的CPU數(shù)量
……

得到的結(jié)果并不讓我滿意：

折騰了大半天才發(fā)現(xiàn)，這是由于標題的#井號和文字之間沒有空格導致的。證明見下：

var MarkdownIt = require('markdown-it'),
md = new MarkdownIt();
console.log(md.render('# markdown-it rulezz!'))//<h2>markdown-it rulezz!</h2>
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);//重點在這里?。?！
    }
   })
 }
}

以上是“vue-cli3項目展示本地Markdown文件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：vue-cli3項目展示本地Markdown文件的示例分析-創(chuàng)新互聯(lián)
文章URL：http://bm7419.com/article14/geege.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、App設計、品牌網(wǎng)站制作、網(wǎng)頁設計公司、全網(wǎng)營銷推廣、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)