vue3 + vite 实现方案 （vite-plugin-md + github-markdown-css）
配置vite-plugin-md插件：插件详情请参考插件文档
步骤一：安装依赖

1. npm i vite-plugin-md -D
   
2. npm i github-markdown-css

复制代码

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

1. // vite.config.ts
   
2. import { defineConfig } from 'vite'
   
3. import vue from '@vitejs/plugin-vue'
   
4. import WindiCSS from 'vite-plugin-windicss'
   
5. import Markdown from 'vite-plugin-md'
   
6. 
   
7. // https://vitejs.dev/config/
   
8. export default defineConfig({
   
9.   plugins: [
   
10.     vue({
    
11.       include: [/\.vue$/, /\.md$/]
    
12.     }),
    
13.     WindiCSS(),
    
14.     Markdown({
    
15.       builders: []
    
16.     })
    
17.   ],
    
18.   resolve: {
    
19.     alias: {
    
20.       '@': '/src/',
    
21.       'vue': 'vue/dist/vue.esm-bundler.js'
    
22.     }
    
23.   },
    
24. })

复制代码

步骤三： 配置 tsconfig.json, 将md文件加入编译需要处理的文件列表中。

1. "include": [
   
2.     "vite.config.ts",
   
3.     "src/**/*.ts",
   
4.     "src/**/*.d.ts",
   
5.     "src/**/*.tsx",
   
6.     "src/**/*.vue",
   
7.     "src/**/*.css",
   
8.     "src/**/*.md" // md文件
   
9.   ],

复制代码

步骤四： 样式引入与使用

1. <template>
   
2.     <article class="markdown-body"> // 使用article 标签并且设置class
   
3.         <FileComMd />
   
4.     </article>
   
5. 
   
6. </template>
   
7. <script>
   
8. import 'github-markdown-css'
   
9. </script>

复制代码

步骤五：组件中使用
使用vue组件一样的引入方式,

1. <template>
   
2.     <FileReadMd></FileReadMd>
   
3. </template>
   
4. <script lang="ts" setup>
   
5. import FileReadMd from './FileReadMd.vue'
   
6. </script>

复制代码

对于文档的说明文件，通常需求引入多个md文件，这里提供批量引入方式。

1. <!--
   
2. * @Description: 说明文档
   
3. * @Author: ym
   
4. * @Date: 2022-11-25 17:12:54
   
5. * @LastEditTime: 2022-11-29 14:20:39
   
6. -->
   
7. <template>
   
8.   <div class="h-full flex flex-col">
   
9.     <div class="flex p-2 items-center bg-primary text-white">
   
10.       <img src="@/assets/img/logo.png" alt="" />
    
11.       <div class="flex-1 px-1 text-[16px]">说明文档</div>
    
12.     </div>
    
13.     <div class="flex-1 flex overflow-hidden">
    
14.       <div class="w-[200px] overflow-y-auto bg-bg">
    
15.         <el-menu active-text-color="#464bff" background-color="#f3f6fa" class="bg-bg" :default-active="defaultActive" text-color="#333">
    
16.           <template v-for="menu in menuList">
    
17.             <el-sub-menu v-if="menu.childrenList && menu.childrenList.length > 0" :index="menu.elementType">
    
18.               <template #title>
    
19.                 <i :class="`${menu.icon} iconfont`"></i>
    
20.                 <span>{{ menu.name }}</span>
    
21.               </template>
    
22.               <template v-for="menuItem in menu.childrenList">
    
23.                 <el-sub-menu v-if="menuItem.childrenList && menuItem.childrenList.length > 0" :index="(menu.elementType || '') + menuItem.type">
    
24.                   <template #title>{{ menuItem.name }}</template>
    
25.                   <el-menu-item v-for="item in menuItem.childrenList" :index="item.type" @click="getMdFileData(item.type)">{{ item.name }}</el-menu-item>
    
26.                 </el-sub-menu>
    
27.                 <el-menu-item v-else :index="menuItem.type" @click="getMdFileData(menuItem.type)">{{ menuItem.name }}</el-menu-item>
    
28.               </template>
    
29.             </el-sub-menu>
    
30.             <el-menu-item v-else :index="menu.elementType" @click="getMdFileData(menu.type)">
    
31.               <i :class="`${menu.icon} iconfont`"></i>
    
32.               <span>{{ menu.name }}</span>
    
33.             </el-menu-item>
    
34.           </template>
    
35.         </el-menu>
    
36.       </div>
    
37.       <div class="flex-1 bg-opacity-20 flex px-18 py-10 overflow-y-auto">
    
38.         <article class="markdown-body">
    
39.           <component v-if="fileName" :is="content" :key="fileName" />
    
40.           <div v-else>{{ `${fileName}文档正在维护中...` }}</div>
    
41.         </article>
    
42.       </div>
    
43.     </div>
    
44.   </div>
    
45. </template>
    
46. <script lang="ts" setup>
    
47. import { ref, shallowRef } from 'vue'
    
48. import { menuList } from './graphManage/components/node'
    
49. import { useRoute } from 'vue-router'
    
50. const route = useRoute()
    
51. const fileName = ref('')
    
52. const defaultActive = ref('FileReadNode')
    
53. route.query.type && (defaultActive.value = route.query.type as string)
    
54. const content = shallowRef('')
    
55. // 导入document下的所有.md文件
    
56. const res = import.meta.glob('../assets/document/*.md', { eager: true })
    
57. const getMdFileData = (name?: string) => {
    
58.   if (name) {
    
59.     // 切换左侧菜单时，右侧动态加载对应组件
    
60.     Object.entries(res).forEach(([path, definition]: any) => {
    
61.       const componentName = path
    
62.         .split('/')
    
63.         .pop()
    
64.         ?.replace(/\.\w+$/, '')
    
65.       if (componentName === name) {
    
66.         fileName.value = name
    
67.         content.value = definition.default
    
68.       }
    
69.     })
    
70.   }
    
71. }
    
72. getMdFileData(defaultActive.value)
    
73. 
    
74. // 这种方式在本地生效， 测试环境组件加载报错
    
75. // const getMdFileData = (name?: string) => {
    
76. //   name &&
    
77. //     import(/* @vite-ignore */ '../assets/document/' + name + '.md')
    
78. //       .then((res) => {
    
79. //         content.value = res.default
    
80. //         fileName.value = name
    
81. //       })
    
82. //       .catch((err) => {
    
83. //         console.error(err)
    
84. //         fileName.value = ''
    
85. //       })
    
86. // }
    
87. </script>

复制代码

vue2实现方案(vue-markdown + vue-markdown-loader +github-markdown-css)
步骤一： 安装依赖

1. npm i vue-markdown
   
2. 
   
3. npm i vue-markdown-loader github-markdown-css -D

复制代码

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

1. module.exports = {
   
2.   runtimeCompiler: true,
   
3.   css: {
   
4.     loaderOptions: {
   
5.       scss: {
   
6.         prependData: `@import "~@/assets/style/index.scss";`
   
7.       }
   
8.     }
   
9.   },
   
10.   chainWebpack: config => {
    
11.     config.module
    
12.     .rule("md")
    
13.     .test(/\.md$/)
    
14.     .use("vue-loader")
    
15.     .loader("vue-loader")
    
16.     .end()
    
17.     .use("vue-markdown-loader")
    
18.     .loader("vue-markdown-loader/lib/markdown-compiler")
    
19.     .options({
    
20.       raw: true
    
21.     });
    
22.   },
    
23. }

复制代码

步骤三： .vue组件中使用

1. <template>
   
2.   <div class="documentView">
   
3.     <div class="header">
   
4.       <img src="@/assets/logo.png" alt="">
   
5.       <img class="bardBg" src="@/assets/bar_bg.png" alt="">
   
6.       <div class="title">数据 - 说明文档</div>
   
7.     </div>
   
8.     <div class="content">
   
9.       <div class="left">
   
10.         <el-menu class="menu">
    
11.           <template v-for="type in menuList">
    
12.             <el-submenu v-if="type.childrenList && type.childrenList.length > 0" :index="type.type" :key="type.key">
    
13.               <template #title>
    
14.                 <i :class="type.icon + ' iconfont'"></i>
    
15.                 <span>{{ type.text }}</span>
    
16.               </template>
    
17.               <template v-for="menuItem in type.childrenList">
    
18.                 <el-submenu class="menuSub" v-if="menuItem.childrenList && menuItem.childrenList.length > 0" :key="menuItem.key" :index="menuItem.key">
    
19.                   <template #title>{{ menuItem.text }}</template>
    
20.                   <el-menu-item @click="getMdFileData(lastMenu.key)" :index="lastMenu.path" v-for="lastMenu in menuItem.childrenList" :key="lastMenu.key">{{
    
21.                   lastMenu.text
    
22.                 }}</el-menu-item>
    
23.                 </el-submenu>
    
24.                 <el-menu-item v-else :key="menuItem.key" :index="menuItem.path" @click="getMdFileData(menuItem.key)">{{ menuItem.text }}
    
25.                 </el-menu-item>
    
26.               </template>
    
27.             </el-submenu>
    
28.             <el-menu-item v-else :index="type.type" :key="type.key" @click="getMdFileData(menuItem.key)">
    
29.               <el-icon size="20" :class="type.icon  + ' iconfont'"></el-icon>
    
30.               <span>{{ type.text }}</span>
    
31.             </el-menu-item>
    
32.           </template>
    
33.         </el-menu>
    
34.       </div>
    
35.       <div class="markdown-body right">
    
36.         <vueMarkDown v-if="mdData" :source="mdData"></vueMarkDown>
    
37.         <div v-else>{{`${type}算子文档正在维护中...`}}</div>
    
38.       </div>
    
39.     </div>
    
40.   </div>
    
41. </template>
    
42. <script>
    
43. import vueMarkDown from "vue-markdown"
    
44. import axios from 'axios'
    
45. import 'highlight.js/styles/github.css'
    
46. import 'github-markdown-css' // 使用github样式
    
47. import { menuConfig } from '@/utils/menu.js'
    
48. export default {
    
49.   name: 'DocumentView',
    
50.   components: { vueMarkDown },
    
51.   data () {
    
52.     return {
    
53.       mdData: '',
    
54.       menuList: menuConfig,
    
55.       type: ''
    
56.     }
    
57.   },
    
58.   methods: {
    
59.     async getMdFileData (key) {
    
60.       this.type = key
    
61.       const url_ = `document/${key}.md` // *文明位于项目的public下
    
62.       try {
    
63.         const res = await axios.get(url_)
    
64.         this.mdData = res.data
    
65.       } catch (error) {
    
66.         this.$message(this.type + '文档维护中...')
    
67.         console.log('缺少文档', this.type)
    
68.         this.mdData = ''
    
69.       }
    
70.     }
    
71.   },
    
72.   mounted () {
    
73.     this.getMdFileData(this.$route.query.type)
    
74.   }
    
75. }
    
76. </script>

复制代码

到此这篇关于vue实现.md文件预览功能的两种方法详解的文章就介绍到这了,更多相关vue预览.md文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339444xl6.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！