您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“如何使用Vite2+Vue3渲染Markdown文檔”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何使用Vite2+Vue3渲染Markdown文檔”吧!
自定義 Vite 插件
使用 vite-plugin-markdown
Import Front Matter attributes
Import compiled HTML (Mode.HTML)
Import ToC metadata (Mode.TOC)
Import as a React component (Mode.REACT)
Import as a Vue component (Mode.VUE)
大部分使用 Vite2 的開(kāi)發(fā)者遇到的一個(gè)問(wèn)題,就是文檔里并沒(méi)有相關(guān)支持 Markdown 的介紹,那么如果想要在 Vite 項(xiàng)目中支持 Markdown 引入并渲染,需要怎么操作?這篇文章將介紹兩種方式。
如果去網(wǎng)上相關(guān)問(wèn)題,大部分都是這種方式,就是自定義插件,使得 Vite 支持 Markdown 渲染,具體做法如下:
在項(xiàng)目根目錄創(chuàng)建 md.js 文件,填充如下內(nèi)容:
import path from 'path'; import fs from 'fs'; import marked from 'marked'; const mdToJs = str => { const content = JSON.stringify(marked(str)); return `export default ${content}`; }; export function md() { return { configureServer: [ // 用于開(kāi)發(fā) async ({ app }) => { app.use(async (ctx, next) => { // 獲取后綴為 .md 的文件,將他變?yōu)?nbsp;js 文件 if (ctx.path.endsWith('.md')) { ctx.type = 'js'; const filePath = path.join(process.cwd(), ctx.path); ctx.body = mdToJs(fs.readFileSync(filePath).toString()); } else { await next(); } }); }, ], transforms: [{ // 用于 rollup test: context => context.path.endsWith('.md'), transform: ({ code }) => mdToJs(code) }] }; }
接著修改 vite.config.js,引入上面創(chuàng)建的插件。
import {md} from './md'; export default { plugins: [md()] };
這樣,在使用時(shí),會(huì)將導(dǎo)入的 md 文件轉(zhuǎn)換成 js 文件渲染。具體使用示例:
<template> <article v-html="md" /> </template> <script lang="ts"> import md from './xxx.md' export default { setup(){ return {md} } }
這款第三方插件不僅支持引入并渲染 Markdown 文件,并且支持渲染成各種格式,例入 HTML 字符串、React 或 Vue 的組件等。
安裝 vite-plugin-markdown。
npm i vite-plugin-markdown
在 vite.config.js 中修改:
const mdPlugin = require('vite-plugin-markdown') export default { plugins: [ mdPlugin.plugin({ mode: ['html'], }) ] }
配置中傳入一個(gè) options,選項(xiàng)對(duì)象,支持以下參數(shù):
mode?: ('html' | 'toc' | 'react' | 'vue')[]
markdown?: (body: string) => string
markdownIt?: MarkdownIt | MarkdownIt.Options
各個(gè)模式下的渲染示例:
--- title: Awesome Title description: Describe this awesome content tags: - "great" - "awesome" - "rad" --- # This is awesome Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. import { attributes } from './contents/the-doc.md'; console.log(attributes) //=> { title: 'Awesome Title', description: 'Describe this awesome content', tags: ['great', 'awesome', 'rad'] }
import { html } from './contents/the-doc.md'; console.log(html) //=> "<h2>This is awesome</h2><p>ite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.</p>"
# vite Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. ## Status ## Getting Started # Notes import { toc } from './contents/the-doc.md' console.log(toc) //=> [{ level: '1', content: 'vite' }, { level: '2', content: 'Status' }, { level: '2', content: 'Getting Started' }, { level: '1', content: 'Notes' },]
import React from 'react' import { ReactComponent } from './contents/the-doc.md' function MyReactApp() { return ( <div> <ReactComponent /> </div> }
<template> <article> <markdown-content /> </article> </template> <script> import { VueComponent } from './contents/the-doc.md' export default { components: { MarkdownContent: VueComponent } }; </script>
到此,相信大家對(duì)“如何使用Vite2+Vue3渲染Markdown文檔”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。