# coze-chat-sdk-vue3

**Repository Path**: DengDeng66/coze-chat-sdk-vue3

## Basic Information

- **Project Name**: coze-chat-sdk-vue3
- **Description**: coze-chat-sdk-vue3扣子智能体web-sdk集成vue.js v3  demo
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-07-06
- **Last Updated**: 2025-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# coze-chat-sdk-vue3

## 项目简介
本项目是一个基于 Vue3 的前端聊天组件集成示例，旨在快速集成 Coze Web SDK，实现与智能聊天机器人的交互。

## 技术栈
- **Vue3**：现代化渐进式前端框架，采用 Composition API，提升代码组织性与可维护性。
- **Vite**：新一代前端构建工具，极致的开发体验和快速热更新。
- **JavaScript (ES6+)**：主力开发语言，结合 async/await 进行异步操作。
- **Coze Web SDK**：第三方聊天机器人前端集成 SDK。
- **CSS Scoped**：组件级样式隔离，保证样式不污染全局。

## 主要功能模块
- `src/App.vue`：应用主入口，负责全局组件的引入与页面结构。
- `src/components/CozeChat.vue`：核心聊天组件，负责与 Coze Web SDK 的集成与配置。
- 其他如 Banner、Footer、业务展示等辅助组件。

## 重点解读：`src/components/CozeChat.vue`
### 组件作用
该组件负责初始化并挂载 Coze Web SDK 聊天机器人，支持自定义用户信息、界面样式、Token 动态获取等。

### 结构说明
- **模板部分**：
  ```html
  <template>
    <div class="coze-chat-container"></div>
  </template>
  ```
  仅包含一个用于挂载聊天窗口的容器。

- **脚本部分**：
  - 使用 `onMounted` 生命周期钩子，在组件挂载时异步获取后端 Token。
  - 通过 `fetch` 请求本地后端 `/token` 接口，获取 `access_token`。
  - 初始化 `CozeWebSDK.WebChatClient`，配置项包括：
    - `config.botId`：指定机器人 ID。
    - `auth`：采用 Token 认证，支持 Token 刷新回调。
    - `userInfo`：自定义用户信息（如 id、昵称等）。
    - `ui`：详细定制聊天窗口的布局、语言、按钮、页脚等。
    - `chatBot`：设置机器人标题、上传能力、宽度等。

- **样式部分**：
  ```css
  .coze-chat-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
  }
  ```
  聊天窗口固定在页面右下角，保证悬浮效果。

### 关键实现点
- **Token 动态获取**：通过异步请求后端接口，保证聊天安全性与用户身份隔离。
- **高度可配置化**：支持 UI 多项自定义，便于适配不同业务场景。
- **与主应用解耦**：组件独立，便于在不同页面或项目中复用。

## 快速开始
1. 安装依赖：
   ```bash
   npm install
   ```
2. 启动开发环境：
   ```bash
   npm run dev
   ```
3. 构建生产包：
   ```bash
   npm run build
   ```

## 目录结构
```
coze-chat-sdk-vue3/
├── public/
├── src/
│   ├── App.vue
│   ├── main.js
│   └── components/
│       ├── CozeChat.vue
│       └── ...
├── package.json
├── vite.config.js
└── README.md
```

## 参考
- [Vue3 官方文档](https://cn.vuejs.org/)
- [Vite 官方文档](https://vitejs.dev/)
- [Coze Web SDK 文档](https://docs.coze.com/)