7. 支持markdown文件导入

支持导入markdown文件

在根目录创建plugins/md.ts

// @ts-nocheck
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: [ // 用于开发
      async ({ app }) => {
        app.use(async (ctx, next) => { // koa
          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.ts中使用

import vue from '@vitejs/plugin-vue'
import {md} from './plugins/md'
// https://vitejs.dev/config/
export default {
  plugins: [vue({
    include: [/\.vue$/, /\.md$/], // <--
  }), md()]
}

动态import markdown文件

<template>
<article class="markdown-body" v-html="content">
</article>
</template>
<script lang="ts">
import {
  ref
} from 'vue'
export default {
  props: {
    path: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const content = ref < string > (null)
    import(props.path).then(result => {
      content.value = result.default
    })
    return {
      content
    }
  }
}
</script>

在路由中使用h函数动态生成组件

import { h } from 'vue';
import Markdown from './components/Markdown.vue';
const md = filename => h(Markdown, { path: `../markdown/${filename}.md`, key: filename })
// ...
{
      path: '/doc',
      component: Doc,
      children: [
        { path: 'install', component: md('install') },
        { path: 'intro', component: md('intro') },
        { path: 'get-started', component: md('get-started') },
      ],
}

也可以使用现成的库

使用vite-plugin-md引入markdown文件
(使用vite-plugin-md后，不需要手动添加markdown-body类)

# 安装
打开终端运行下列命令：

npm install king-ui

或

yarn add king-ui

下一节：[开始使用](#/doc/get-started)

<template>
<Install />
</template>
<script>
  import Install from '../markdown/install.md'
  export default {
    components: {
      Install
    }
  }
</script>

tsconfing.json中添加配置运行使用Javascript

"allowJs": true

解决typescript不能识别md

在根目录的env.d.ts中添加

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const Component: ComponentOptions
  export default Component
}
declare module '*.md' {
  import { ComponentOptions } from 'vue'
  const Component: ComponentOptions
  export default Component
}

pre标签

 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。
  <pre>
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
 
&lt; 和 &gt;是<和>符号