Vue3 deepseek gemini
vue3+deepseek+gemini对接apiKey,实现AI对话
基于 Vue 3 部署 `DeepSeek` 和 `Google Gemini 2.0` API集成的`Web AI`对话框,抖音风格,支持代码高亮显示,并针对移动端进行了简洁适配。 The project is written primarily in HTML, first published in 2025. Key topics include: deepseek, gemini, highlightjs, vite, vue.
描述
基于 Vue 3 部署 DeepSeek 和 Google Gemini 2.0 API集成的Web AI对话框,抖音风格,支持代码高亮显示,并针对移动端进行了简洁适配。
✨ 核心特性
🎯 智能预设会话系统
- CRUD页面配置助手:专业的前端工程师助手,支持自然语言转Vue3配置代码
- 预设会话标识:星标标记,一目了然
- 预设保护机制:预设会话不可删除,确保系统稳定性
- 即开即用:无需配置,开箱即用的专业模板
🛠️ 自定义AI输出规则
- 模块化提示词管理:通过
src/config/prompts.js统一管理AI提示词 - 双引擎支持:DeepSeek和Gemini模型分别配置专属提示词
- 专业领域定制:针对前端开发场景优化的AI输出规则
- 智能类型推断:根据字段描述自动推断合适的组件类型
📥 智能代码导出功能
- 一键导出代码:智能识别代码块,支持多种格式
- 智能文件命名:根据代码类型自动生成文件名
- 多代码块合并:自动合并多个代码片段
- 格式支持:TypeScript、JavaScript、Vue、HTML、CSS等
🎨 UI/UX优化
- 抖音风格界面:时尚美观的用户界面
- 代码高亮显示:支持语法高亮,便于阅读
- 移动端适配:响应式设计,完美适配各种设备
- 动画效果:流畅的交互动画,提升用户体验
使用方法
-
配置 API Key:
请务必将
src/config目录下的配置文件API_KEY替换为你自己申请的 API Key。注意: Google Gemini 2.0 需要科学上网才能正常使用。
具体来说,你需要修改
src/config/deepseek.js或者src/config/gemini.js(看你需求具体需要使用那种模型):javascript// src/config/index.js export default { API_KEY: 'YOUR_API_KEY', // 替换为你的 API Key // ... 其他配置 };重要提示: 请妥善保管你的 API Key,不要将其提交到公共仓库!
-
运行项目:
完成 API Key 配置后,按照以下步骤运行项目:
-
安装依赖:
bashnpm install # 或者使用 yarn install / pnpm install -
启动项目:
bashnpm run dev -
构建项目:
bashnpm run build -
部署构建后的文件到你的服务器。
-
🚀 快速体验
在线预览
访问 https://euzhi.com/ 在线体验完整功能。
预设会话体验
- 打开应用后,左侧会看到带星标的"CRUD页面配置"会话
- 点击进入,按照提示描述你的页面需求
- AI会自动生成专业的Vue3配置代码
- 点击"导出代码"按钮,一键下载生成的代码文件
使用示例
输入描述:
用户管理表格,包含以下字段:
- 用户ID(数字)
- 用户名(文本)
- 邮箱(文本)
- 状态(选择:启用/禁用)
- 注册时间(日期)
AI自动生成:
- 完整的搜索参数配置
- 详细的表格列定义
- 智能的组件类型推断
- 清晰的中文注释
环境说明
- Node.js: v18.20.5
- npm: 10.8.2
其他说明
如果对你有帮助给我点一个star吧,谢谢!
贡献
欢迎提交 issue 和 pull request!
This article is auto-generated from cxz520299/vue3-deepseek-gemini via the GitHub API.Last fetched: 6/28/2026
