首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Vite8.0+Vue3.5+Arco深度对接DeepSeek网页版AI智能助手

Vite8.0+Vue3.5+Arco深度对接DeepSeek网页版AI智能助手

原创
作者头像
andy2018
发布2026-03-19 21:09:31
发布2026-03-19 21:09:31
2030
举报
文章被收录于专栏:h5h5

2026正式版vite8.0+vue3+arco+pinia3对接deepseek打造本地web网页版ai对答模板。

vite8-deepseek-webai提供暗黑+亮色主题、支持流式打字输出深度思考代码高亮/复制/下载渲染katex公式/mermaid图等功能。

技术框架

  • 开发工具:vscode
  • 前端框架:vite8.0+vue3.5.30+vue-router5.0.3
  • 大模型框架:deepseek-v3.2 + openai
  • 组件库:arco-design2.57.0
  • 状态管理:pinia3.0.4
  • markdown插件:markdown-it14.1.0
  • 代码高亮插件:highlight.js11.11.1
  • katex公式:plugin-katex0.25.1

项目功能清单

  1. 支持深色+浅色主题 ✨
  2. 支持深度思考模式 ✨
  3. 支持katex数学公式 ✨
  4. 支持渲染mermaid图表(拖拽、缩放(放大+缩小+重置)、下载)✨
  5. 支持代码块顶部sticky粘性、横向滚动、代码复制/下载代码 ✨
  6. 支持上下文多轮对话/本地存储对话 ✨
  7. 支持链接跳转、图片预览功能 ✨

项目框架目录

使用最新vite8.0创建项目,接入deepseek api智能模型,vue3 setup语法糖开发页面。

项目入口文件

代码语言:actionscript
复制
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

// 引入路由/状态配置
import Router from './router'
import Pinia from './pinia'

// 引入插件配置
import Plugins from './plugins'

// 初始化app实例
createApp(App)
.use(Router)
.use(Pinia)
.use(Plugins)
.mount('#app')

项目布局结构

代码语言:actionscript
复制
<script setup>
  import Sidebar from '@/layouts/components/sidebar/index.vue'
</script>

<template>
  <div class="vu__container">
    <div class="vu__layout flexbox flex-col">
      <div class="vu__layout-body flex1 flexbox">
        <!-- 侧边区域 -->
        <Sidebar />

        <!-- 主面板区域 -->
        <div class="vu__layout-main flex1">
          <router-view v-slot="{ Component, route }">
            <keep-alive>
              <component :is="Component" :key="route.path" />
            </keep-alive>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

vite8接入deepseek api深度思考

代码语言:actionscript
复制
// 调用deepseek接口
const completion = await openai.chat.completions.create({
  // 单一会话
  /* messages: [
    {role: 'user', content: editorValue}
  ], */
  // 多轮会话
  messages: props.multiConversation ? historySession.value : [{role: 'user', content: editorValue}],
  // deepseek-chat对话模型 deepseek-reasoner推理模型
  model: sessionstate.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat',
  stream: true, // 流式输出
  max_tokens: 8192, // 一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
  temperature: 0.4, // 严谨采样
})

2026版開工新作uni-app+mphtml结合deepseek跨端ai应用

vite7.2-deepseek流式ai对话|vue3.5+vant4+katex+mermaid智能ai打字会话

最新实战Vite7.3+Tauri2.10深度集成DeepSeek桌面端AI智能助手

Electron-DeepSeek-Chat流式AI系统|electron39+vue3+deepseek手搓ai

electron38-vite7-vue3os电脑端os管理系统

最新版electron38-vite7-admin电脑端中后台管理系统

Electron38+Vite7+Pinia3+ElementPlus客户端聊天程序

基于tauri2.8+vite7+vue3+element-plus仿QQ/微信聊天应用

tauri2.9-vite7-vue3admin客户端后台系统管理Exe模板

最新原创uniapp-vue3-osadmin手机版后台管理系统

最新研发uniapp+vue3仿微信app聊天模板

最新原创flutter3.27+bitsdojo_window客户端聊天Exe

自研新版Flutter3.32仿微信app聊天|朋友圈模板

基于uni-app+vue3实战短视频+聊天+直播app商城

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 技术框架
  • 项目功能清单
  • 项目框架目录
  • 项目入口文件
  • 项目布局结构
  • vite8接入deepseek api深度思考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档