vue引入deepseek

首先需要申请key: 地址

deepseek文档地址

使用fetch或者axios发送请求获取数据

    const response = await axios('https://api.deepseek.com/chat/completions', {
      method: 'POST',
      responseType: 'text', 
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY'
      },
      data: {
	      model: 'deepseek-chat',
	      messages: [{ role: 'user', content: '发送到deepseek的内容'}], // role有其他的角色，具体可以查看文档
	      temperature: 0.7,
	      stream: true, // 是否发送流式数据
      },
      onDownloadProgress: (progressEvent) => { // 获取流式数据
            const text = progressEvent.currentTarget.responseText.replace(/\\n/g, '<br/>') // 换乘br，防止换行符解析在浏览器失效
            const infoList = text.match(/data:\s*(\{[^}]*\})/g).splice(length) // 通过正则获取想要的内容
            length = text.match(/data:\s*(\{[^}]*\})/g).length
            infoList.forEach(item => {
              console.log(item, 'item')
              const jsonStr = item.replace(/^data:\s*/, '')
              try {
                this.deepSeekData += JSON.parse(jsonStr).content
              } catch (e) {
                console.error('解析JSON失败:', e, '原始数据:', jsonStr)
                return null
              }
            })
          }
    });

在页面渲染

使用vue-markdown解析md文本内容

• 使用方法

npm install vue-markdown --save

<template>
<!-- 
source： 需要渲染的Markdown原始文本
html：是否解析HTML标签（开启需注意XSS风险）
breaks：是否将换行符\n渲染为<br>
toc：是否生成目录（Table of Contents）
toc-anchor-link： 是否在标题旁显示目录锚点链接
toc-first-level： 目录包含的最小标题级别（1-6）
plugins： ['markdown-it-emoji']
 -->
<vue-markdown
   :html="true"
   :breaks="true"
   :tables="true"
   :task-lists="true"
   :emoji="true"
   :source="source"
 />
</template>

<script>
import VueMarkdown from 'vue-markdown';

export default {
  data() {
    return {
      markdown: '# Hello, Vue Markdown!'
    }
  },
  components: {
    VueMarkdown
  }
}
</script>