快捷導(dǎo)航

vue-cli3項(xiàng)目展示本地Markdown文件的方法

更新時(shí)間：2019年06月07日 09:50:14 作者：chenyunqing

這篇文章主要介紹了vue-cli3項(xiàng)目展示本地Markdown文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

【版本】

vue-cli3
webpack@4.33.0

【步驟】1、安裝插件vue-markdown-loader

npm i vue-markdown-loader -D

ps：這個(gè)插件是基于markdown-it的，不需要單獨(dú)安裝markdown-it。

2、修改vue.config.js配置文件（如果沒有，在項(xiàng)目根目錄新建一個(gè)）：

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è)務(wù)給我的Markdown文檔的標(biāo)題是這樣的：

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

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

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

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 :)

愚蠢的我想出了一個(gè)解決辦法：

因?yàn)?a target="_blank" rel="external nofollow" rel="external nofollow" >HyperDown.js能避免上面那樣的情況，于是我用它來對(duì)文檔做預(yù)處理。

安裝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);//重點(diǎn)在這里?。?！
    }
   })
 }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: