vue3实现markdown逐字输出，并在末尾加入加载图标

在Vue3中，要实现Markdown逐字输出并在末尾添加加载图标，你可以结合`vue-markdown-loader`（用于解析Markdown文件）和自定义组件来完成这个任务。这里是一个简化的步骤：

1. 首先，安装必要的依赖：

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

2. 在你的项目配置文件（如`webpack.config.js`）中，配置markdown-loader：

   module.exports = {
     // ...其他配置
     module: {
       rules: [
         {
           test: /\.md$/,
           use: [
             'vue-loader',
             {
               loader: 'markdown-it-loader',
               options: {
                 html: true, // 允许HTML标签
               },
             },
           ],
         },
       ],
     },
   };

3. 创建一个名为`MarkdownContent.vue`的组件，它将接收Markdown内容作为props并渲染：

   <template>
     <div v-if="isLoading" slot="loading">正在加载...</div>
     <div v-else class="markdown-content">
       <div v-html="formattedMarkdown"></div>
     </div>
   </template>

   <script>
   export default {
     props: {
       markdownText: { type: String, required: true },
     },
     data() {
       return {
         formattedMarkdown: '',
         isLoading: true,
       };
     },
     async mounted() {
       try {
         this.formattedMarkdown = await marked(this.markdownText);
         this.isLoading = false;
       } catch (error) {
         console.error('Markdown parsing error:', error);
       }
     },
   };
   </script>

   <style scoped>
   .markdown-content {
     white-space: pre-wrap; /* 或者 "pre-line"，根据需求调整 */
   }
   </style>

4. 使用这个组件时，在需要的地方引用它，传递Markdown文本：

   <MarkdownContent :markdown-text="yourMarkdownContent" />

现在，当你在`yourMarkdownContent`变量中设置Markdown字符串时，组件会逐行加载并显示解析后的HTML内容，如果加载过程中发生错误，会在末尾显示“正在加载...”。