vue-markdown-loader

`vue-markdown-loader` 是一个用于 Vue.js 的 Webpack 插件，它允许开发者将 Markdown 文档转换成可渲染的 HTML 并嵌入到 Vue 单元组件中。这个插件可以让你轻松地在 Vue 应用中使用 markdown 格式的文本，比如博客文章、教程或者其他需要动态呈现格式化文本的地方。

使用 `vue-markdown-loader` 的步骤通常是这样的：

1. **安装**：

   npm install markdown-it vue-markdown-loader --save-dev

2. **配置 Webpack**：
在你的 `.webpack.config.js` 文件中，添加以下配置到 loader 部分：

   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /\.md$/,
           use: [
             'vue-loader',
             {
               loader: 'markdown-loader',
               options: {
                 vue: true, // 启用 Vue 插件支持
               },
             },
           ],
         },
       ],
     },
   };

3. **在 Vue 组件中使用**：
在 Vue 文件中，你可以像这样导入和使用转换后的 HTML：

   <template>
     <div v-html="formattedMarkdownContent"></div>
   </template>

   <script>
   import marked from 'marked';

   export default {
     data() {
       return {
         markdownContent: '# Hello World in Markdown',
       };
     },
     computed: {
       formattedMarkdownContent() {
         return marked(this.markdownContent);
       },
     },
   };
   </script>

这样，当你在 `markdownContent` 上更改时，对应的 HTML 就会被更新。