Praxis der Verwendung von Vite2+Vue3 zum Rendern von Markdown-Dokumenten

Pfad von „Pfad“ importieren;
importiere fs von „fs“;
Markiertes von „markiert“ importieren;

const mdToJs = str => {
  const Inhalt = JSON.stringify(markiert(str));
  gibt `export default ${content}` zurück;
};

Exportfunktion md() {
  zurückkehren {
    configureServer: [ // Für die Entwicklung async ({ app }) => {
        app.use(async (ctx, next) => {
          // Holen Sie sich die Datei mit der Endung .md und wandeln Sie sie in eine JS-Datei um, wenn (ctx.path.endsWith('.md')) {             
            ctx.Typ = "js";
            const filePath = Pfad.Join(process.cwd(), ctx.Pfad);
            ctx.body = mdToJs(fs.readFileSync(filePath).toString());
          } anders {
            warte auf das nächste();
          }
        });
      },
    ],
    transforms: [{ // für Rollup
      Test: Kontext => Kontext.Pfad.endsWith('.md'),
      transformieren: ({ Code }) => mdToJs(Code)
    }]
  };
}

importiere {md} von './md';

Standard exportieren {
  Plugins: [md()]
};

<Vorlage>
<Artikel v-html="md" />
</Vorlage>

<script lang="ts">
importiere md aus './xxx.md'
Standard exportieren {
aufstellen(){

  Rückkehr {md}
  
  }
}

npm und vite-plugin-markdown

const mdPlugin = erfordern('vite-plugin-markdown')

Standard exportieren {
  Plugins: [
    mdPlugin.plugin({
      Modus: ['html'],
    })
  ]
}

---
Titel: Toller Titel
Beschreibung: Beschreiben Sie diesen tollen Inhalt
Stichworte:
  - "Großartig"
  - "Eindrucksvoll"
  - "rad"
---
# Das ist großartig
Vite ist ein eigensinniges Build-Tool für die Webentwicklung, das Ihren Code während der Entwicklung über native ES-Modulimporte bereitstellt und ihn für die Produktion mit Rollup bündelt.

importiere { Attribute } aus './contents/the-doc.md';

console.log(Attribute) //=> { Titel: 'Toller Titel', Beschreibung: 'Beschreiben Sie diesen tollen Inhalt', Tags: ['großartig', 'toll', 'cool'] }

importiere { html } aus './contents/the-doc.md';

konsole.log(html) 
//=> „<h1>Das ist großartig</h1><p>Es ist ein eigensinniges Web-Entwicklungstool, das Ihren Code während der Entwicklung über native ES-Modulimporte bereitstellt und ihn für die Produktion mit Rollup bündelt.</p>“

# einladen

Vite ist ein eigensinniges Build-Tool für die Webentwicklung, das Ihren Code während der Entwicklung über native ES-Modulimporte bereitstellt und ihn für die Produktion mit Rollup bündelt.

## Status

## Erste Schritte

# Anmerkungen

importiere { toc } aus './contents/the-doc.md'

Konsole.log(Inhaltsverzeichnis)
//=> [{ level: '1', content: 'vite' }, { level: '2', content: 'Status' }, { level: '2', content: 'Erste Schritte' }, { level: '1', content: 'Notizen' },]

React von „react“ importieren
importiere { ReactComponent } aus './contents/the-doc.md'

Funktion MyReactApp() {
  zurückkehren (
    <div>
      <ReactComponent />
    </div>
}

<Vorlage>
  <Artikel>
    <Markdown-Inhalt />
  </Artikel>
</Vorlage>

<Skript>
importiere { VueComponent } aus './contents/the-doc.md'

Standard exportieren {
  Komponenten:
    Markdown-Inhalt: VueComponent
  }
};
</Skript>