一、书接上回
上次我们讨论到，当使用 SSE 的方式获取到数据之后，将他写入了一个vue的 ref 中，然后给他直接在页面上展示出来，可以看到最后生成了一坨，非常不美观，这时候我们可以参考一下一般的AICG 应用，他们一般是以对话框的形式，来展示AI与用户的交互，我们可以先不搞这么复杂，但是可以先让他有格式的输出。
二、细节分析
其实观察AI传给我的数据可以看出来，AI生成的内容，实际已经是有一定的格式的：
- 代码部分都是用 ``` 包围的
- 重点部分有些被 * 包围
作为一个资深开发者，敏锐的嗅觉一下就应该觉察出，AI生成的，就是 markdown 的语法格式，ok，那好，现在的问题就转换为，如何让自己的vue中，体现 markdown 语法了。
三、寻找技术栈
豆包！
- 首先安装
markdown - it。在项目目录下，通过命令行运行npm install markdown - it。 - 在 Vue 3 组件中使用，例如创建一个名为
MarkdownViewer.vue的组件。
收起
html
复制
<template>
<div v - html="htmlContent"></div>
</template>
<script>
import MarkdownIt from'markdown - it';
export default {
props: {
markdownText: {
type: String,
required: true
}
},
computed: {
htmlContent() {
const md = new MarkdownIt();
return md.render(this.markdownText);
}
}
};
</script>- 在上述代码中，组件接收一个
markdownText属性，它是要转换的 Markdown 文本。通过MarkdownIt库将 Markdown 文本转换为 HTML，然后使用v - html指令将 HTML 内容渲染到div元素中。不过要注意，v - html可能会带来安全风险，因为它会直接渲染 HTML 内容
- 安装
vue3 - markdown - it，在命令行运行npm install vue3 - markdown - it。 - 在
main.js（或main.ts）文件中进行配置。
收起
javascript
复制
import { createApp } from 'vue';
import App from './App.vue';
import VueMarkdownIt from 'vue3 - markdown - it';
const app = createApp(App);
app.use(VueMarkdownIt);
app.mount('#app');- 在组件中使用就很简单了，例如：
收起
html
复制
<template>
<vue - markdown - it :source="markdownText"></vue - markdown - it>
</template>
<script>
export default {
data() {
return {
markdownText: '# Hello, Vue 3 Markdown!'
};
}
};
</script>- 这里
vue - markdown - it组件接收source属性，它是要显示的 Markdown 文本，vue3 - markdown - it库会自动将其转换并正确显示。这种方式相对更符合 Vue 3 的插件使用风格，并且减少了一些手动处理 HTML 渲染的步骤。
好，那就用！
yarn add markdown-it理解一下，这个 markdown-it 组件，就是把 markdown 的文本，转换为 html 格式，然后就可以利用 v-html 的指令，放到元素里。
四、浅浅的使用一下
1、导入组件依赖
import MarkdownIt from "markdown-it"2、创建对象
const md = new MarkdownIt()3、模板使用
<div v-html="md.render(chat.msg)"></div>五、效果
现在我们可以完美输出了：
- 重点可以加粗
- 自动换行
- 代码可以放在代码行里
那么基本的功能，所有的都实现了，那么接下来，就要继续优化，马斯克曾经说过：要去做，先做出一坨屎来，再慢慢改，方向有两个：
- 继续优化模型，让输出更准确
- 继续优化页面，让他更像一个AI 应用
所以，又到了~
下集预告
优化模型输出，限制关键词，话题分类器
