vue實現(xiàn).md文件預覽功能的兩種方法詳解

更新時間：2025年04月11日 10:25:47 作者：Y...................

這篇文章主要介紹了Vue預覽.md文件的兩種方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

vue3 + vite 實現(xiàn)方案（vite-plugin-md + github-markdown-css）

配置vite-plugin-md插件：插件詳情請參考插件文檔

步驟一：安裝依賴

npm i vite-plugin-md -D
npm i github-markdown-css

步驟二： vite-plugin-md 插件配置

// vite.config.ts 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
import Markdown from 'vite-plugin-md'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      include: [/\.vue$/, /\.md$/]
    }),
    WindiCSS(),
    Markdown({
      builders: []
    })
  ],
  resolve: {
    alias: {
      '@': '/src/',
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  },
})

步驟三：配置 tsconfig.json, 將md文件加入編譯需要處理的文件列表中。

"include": [
    "vite.config.ts",
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.css",
    "src/**/*.md" // md文件
  ],

步驟四：樣式引入與使用

<template>
    <article class="markdown-body"> // 使用article 標簽并且設置class
        <FileComMd />
    </article>

</template>
<script>
import 'github-markdown-css'
</script>

步驟五：組件中使用

使用vue組件一樣的引入方式,

<template>
    <FileReadMd></FileReadMd>
</template>
<script lang="ts" setup>
import FileReadMd from './FileReadMd.vue'
</script>

對于文檔的說明文件，通常需求引入多個md文件，這里提供批量引入方式。

<!--
 * @Description: 說明文檔
 * @Author: ym
 * @Date: 2022-11-25 17:12:54
 * @LastEditTime: 2022-11-29 14:20:39
-->
<template>
  <div class="h-full flex flex-col">
    <div class="flex p-2 items-center bg-primary text-white">
      <img src="@/assets/img/logo.png" alt="" />
      <div class="flex-1 px-1 text-[16px]">說明文檔</div>
    </div>
    <div class="flex-1 flex overflow-hidden">
      <div class="w-[200px] overflow-y-auto bg-bg">
        <el-menu active-text-color="#464bff" background-color="#f3f6fa" class="bg-bg" :default-active="defaultActive" text-color="#333">
          <template v-for="menu in menuList">
            <el-sub-menu v-if="menu.childrenList && menu.childrenList.length > 0" :index="menu.elementType">
              <template #title>
                <i :class="`${menu.icon} iconfont`"></i>
                <span>{{ menu.name }}</span>
              </template>
              <template v-for="menuItem in menu.childrenList">
                <el-sub-menu v-if="menuItem.childrenList && menuItem.childrenList.length > 0" :index="(menu.elementType || '') + menuItem.type">
                  <template #title>{{ menuItem.name }}</template>
                  <el-menu-item v-for="item in menuItem.childrenList" :index="item.type" @click="getMdFileData(item.type)">{{ item.name }}</el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="menuItem.type" @click="getMdFileData(menuItem.type)">{{ menuItem.name }}</el-menu-item>
              </template>
            </el-sub-menu>
            <el-menu-item v-else :index="menu.elementType" @click="getMdFileData(menu.type)">
              <i :class="`${menu.icon} iconfont`"></i>
              <span>{{ menu.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <div class="flex-1 bg-opacity-20 flex px-18 py-10 overflow-y-auto">
        <article class="markdown-body">
          <component v-if="fileName" :is="content" :key="fileName" />
          <div v-else>{{ `${fileName}文檔正在維護中...` }}</div>
        </article>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, shallowRef } from 'vue'
import { menuList } from './graphManage/components/node'
import { useRoute } from 'vue-router'
const route = useRoute()
const fileName = ref('')
const defaultActive = ref('FileReadNode')
route.query.type && (defaultActive.value = route.query.type as string)
const content = shallowRef('')
// 導入document下的所有.md文件
const res = import.meta.glob('../assets/document/*.md', { eager: true })
const getMdFileData = (name?: string) => {
  if (name) {
    // 切換左側(cè)菜單時，右側(cè)動態(tài)加載對應組件
    Object.entries(res).forEach(([path, definition]: any) => {
      const componentName = path
        .split('/')
        .pop()
        ?.replace(/\.\w+$/, '')
      if (componentName === name) {
        fileName.value = name
        content.value = definition.default
      }
    })
  }
}
getMdFileData(defaultActive.value)

// 這種方式在本地生效， 測試環(huán)境組件加載報錯
// const getMdFileData = (name?: string) => {
//   name &&
//     import(/* @vite-ignore */ '../assets/document/' + name + '.md')
//       .then((res) => {
//         content.value = res.default
//         fileName.value = name
//       })
//       .catch((err) => {
//         console.error(err)
//         fileName.value = ''
//       })
// }
</script>

vue2實現(xiàn)方案(vue-markdown + vue-markdown-loader +github-markdown-css)

步驟一：安裝依賴

npm i vue-markdown

npm i vue-markdown-loader github-markdown-css -D

步驟二：vue.config.js 配置loader

module.exports = {
  runtimeCompiler: true,
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/assets/style/index.scss";`
      }
    }
  },
  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
    });
  },
}

步驟三： .vue組件中使用

<template>
  <div class="documentView">
    <div class="header">
      <img src="@/assets/logo.png" alt="">
      <img class="bardBg" src="@/assets/bar_bg.png" alt="">
      <div class="title">數(shù)據(jù) - 說明文檔</div>
    </div>
    <div class="content">
      <div class="left">
        <el-menu class="menu">
          <template v-for="type in menuList">
            <el-submenu v-if="type.childrenList && type.childrenList.length > 0" :index="type.type" :key="type.key">
              <template #title>
                <i :class="type.icon + ' iconfont'"></i>
                <span>{{ type.text }}</span>
              </template>
              <template v-for="menuItem in type.childrenList">
                <el-submenu class="menuSub" v-if="menuItem.childrenList && menuItem.childrenList.length > 0" :key="menuItem.key" :index="menuItem.key">
                  <template #title>{{ menuItem.text }}</template>
                  <el-menu-item @click="getMdFileData(lastMenu.key)" :index="lastMenu.path" v-for="lastMenu in menuItem.childrenList" :key="lastMenu.key">{{
                  lastMenu.text
                }}</el-menu-item>
                </el-submenu>
                <el-menu-item v-else :key="menuItem.key" :index="menuItem.path" @click="getMdFileData(menuItem.key)">{{ menuItem.text }}
                </el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item v-else :index="type.type" :key="type.key" @click="getMdFileData(menuItem.key)">
              <el-icon size="20" :class="type.icon  + ' iconfont'"></el-icon>
              <span>{{ type.text }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <div class="markdown-body right">
        <vueMarkDown v-if="mdData" :source="mdData"></vueMarkDown>
        <div v-else>{{`${type}算子文檔正在維護中...`}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import vueMarkDown from "vue-markdown"
import axios from 'axios'
import 'highlight.js/styles/github.css'
import 'github-markdown-css' // 使用github樣式
import { menuConfig } from '@/utils/menu.js'
export default {
  name: 'DocumentView',
  components: { vueMarkDown },
  data () {
    return {
      mdData: '',
      menuList: menuConfig,
      type: ''
    }
  },
  methods: {
    async getMdFileData (key) {
      this.type = key
      const url_ = `document/${key}.md` // *文明位于項目的public下
      try {
        const res = await axios.get(url_)
        this.mdData = res.data
      } catch (error) {
        this.$message(this.type + '文檔維護中...')
        console.log('缺少文檔', this.type)
        this.mdData = ''
      }
    }
  },
  mounted () {
    this.getMdFileData(this.$route.query.type)
  }
}
</script>

到此這篇關(guān)于vue實現(xiàn).md文件預覽功能的兩種方法詳解的文章就介紹到這了,更多相關(guān)vue預覽.md文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: