【AI大模型调用】10min学会调用通义千问大模型

提示：文章介绍在 Vite + Vue3 环境下创建首个 demo 并调用通义千问的过程，涵盖前期环境准备，包括在 Cloudstudio 搭建 vite+vue3 环境、了解 demo 文件结构、通义千问模型广场及 API 调用，以及实现 demo 调用，最后进行代码分析，包含 UI 布局、API 调用及源代码解释。

---

前言

1,Vite 以快速冷启动和即时热模块替换，优化了开发体验，是搭建 Vue3 项目的热门选择。Vue3 凭借升级的响应式系统和 Composition API，让代码组织与复用更高效，能构建高性能、易维护的前端应用。

2,通义千问作为前沿 AI 语言模型，具备强大的自然语言处理与智能交互能力，能为应用增添智能交互体验，实现智能问答、内容生成等功能。

3,本文将深入探讨在 Vite + Vue3 环境下创建首个 demo 并调用通义千问的过程，为开发者整合类似技术提供参考，助力开启智能应用开发新篇章。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前期环境准备阶段

1. 学会使用cloudstudio快速搭建vite+vue3的环境

   （1）直接访问Cloudstudio 官方网站 ： [link] (https://cloudstudio.net/)，进入Cloudstudio，先注册登录
   （2）按照图片步骤执行创建应用，选择Vue.js，点击记忆+【vue.js】创建项目

（3）等待IDE执行完毕后，代表vite+vue3的环境搭建成功
    ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0b948befffb44e428c3814c8ce271858.png)

2. 在vite+vue3环境下创建第一个demo，学习基本的文件结构

文件结构如下：
 workspace/
├── extensions.json   // 插件配置
├── .vscode 
│   └── preview.yml   // Cloud Studio 配置文件（运行、预览等）
├── public           
│   └── ...
├── src        
│   └── assets    
│   └── components    // 组件
│   └── App.vue       // 入口文件
│   └── main.js       
├── .gitignore   
├── package.json      // 包依赖引用配置
├── rollup.config.js  // Leafer Js 配置文件（端口，入口文件名等）
├── README.md         // 项目说明文档
├── img               // readme图片目录
|   └── ...                

3. 通义千问模型广场介绍以及API调用实例

（1）直接访问aliyun官方网站 ：https://bailian.console.aliyun.com/#/model-market，（如果没有登录要先做登录操作）
（2）先创建API-KEY，操作步骤如下

（3）从官网上看截至今日已经有270个模型，可以点击查看详情，了解具体的情况以及收费标准，或者立即体验，体验实际的效果

4. 实现在vite+vue3环境下创建的demo调用

其实进行到这一步环境的配置已经基本完成，我们可以写一个小demo来展示实际的调用效果，下面的内容是实际展示的效果

success

三、代码分析

1.核心代码分析创建UI布局

// 代码如下（示例）：
1，创建一个vue文件，布局一个ASK AI的输入框，在输入框的左侧布局一个发送按钮，然后再添加一个AI Reply 的输出框

<template>
  <div class="ai-page">
    <h1>Ask AI</h1>
    <div class="chat-box">
      <!-- 这里可以显示与AI的对话历史 -->
    </div>
    <div class="input-area">
      <textarea v-model="message" placeholder="Type your question here..."></textarea>
      <button @click="sendMessage">Send</button>
    </div>
    <div class="reply-box">
      <h2>AI Reply:</h2>
      <textarea v-model="reply" readonly placeholder="AI's reply will appear here..."></textarea>
    </div>
  </div>
</template>

2.调用通义千问API请求回复数据

调用通义千问API请求回复数据，进行展示;

const sendMessage = async () => {
  // 打印用户发送的消息到控制台
  console.log('Sending message:', message.value);
  
  // 如果消息为空或仅包含空白字符，则不执行后续操作
  if (message.value.trim() === '') return;

  // 定义API密钥和基础URL
  const apiKey = "xxxxxxxxxxxxxxxx";  
  const baseURL = "https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions";
  
  try {
    // 发送POST请求到AI服务API
    const response = await axios.post(
      baseURL,
      {
        model: "qwen-plus", // 指定使用的AI模型
        messages: [ // 定义对话消息
          { role: "system", content: "You are a helpful assistant." },
          { role: "user", content: message.value }
        ],
      },
      {
        headers: {
          "Content-Type": "application/json", // 设置请求头的内容类型为JSON
          "Authorization": `Bearer ${apiKey}` // 设置请求头的授权信息
        },
      }
    );

    // 从响应中提取AI的回复内容
    console.log(response.data.choices[0].message.content);
    reply.value = response.data.choices[0].message.content; // 将回复内容赋值给reply变量，用于在界面上显示
    
  } catch (error) {
    // 如果发送请求过程中出现错误，打印错误信息
    console.log(`错误信息：${error.message}`);
    console.log("请参考文档：https://help.aliyun.com/zh/model-studio/developer-reference/error-code");
    // 可以选择在这里设置一个错误状态或消息，以便在UI上通知用户
  }

  // 清空文本框中的消息，以便用户输入新的消息
  message.value = '';
};

3.源代码分析与解释

1，这段代码是Vue 3组件AIPage.vue中的一部分，它定义了一个名为sendMessage的异步函数，用于向AI服务发送用
户输入的消息，并接收AI的回复。下面是对这段代码的解释：

发送用户消息：获取用户在文本框中输入的消息。
调用AI服务：通过HTTP POST请求将用户的消息发送到指定的AI服务API。
接收AI回复：从AI服务的响应中提取回复内容，并显示给用户。
错误处理：捕获并处理在发送消息过程中可能出现的任何错误。


2，对于关键点的解释：

apiKey：这是调用AI服务API所需的授权密钥。
baseURL：这是AI服务API的端点URL。
axios.post：使用axios库发送HTTP POST请求到指定的URL。
response.data.choices[0].message.content：这是从AI服务响应中提取回复内容的路径。
reply.value：这是一个响应式变量，用于在Vue组件中绑定和显示AI的回复。
错误处理：使用try...catch语句来捕获和处理可能发生的错误。
当用户点击发送按钮时，sendMessage函数会被触发，执行上述过程，实现与AI服务的交互。

总结

1，技术优势：Vite 具备快速冷启动和即时热模块替换功能，优化开发体验，是搭建 Vue3 项目的热门选择；Vue3 通过升级响应式系统和引入 Composition API，提升了代码组织与复用效率，利于构建高性能、易维护的前端应用；通义千问作为前沿 AI 语言模型，有强大的自然语言处理和智能交互能力，能为应用增添智能交互体验，实现智能问答、内容生成等功能。

2，创建首个 demo 并调用通义千问的过程：前期环境准备阶段，先在 Cloudstudio 快速搭建 vite+vue3 的环境，接着在该环境下创建第一个 demo 并学习其基本文件结构，然后介绍通义千问模型广场及 API 调用实例，最后实现 vite+vue3 环境下创建的 demo 调用。

3，代码分析：对核心代码进行分析，包括创建 UI 布局，布局一个 ASK AI 的输入框、发送按钮和 AI Reply 的输出框；调用通义千问 API 请求回复数据并展示；还对源代码进行分析与解释，包括发送用户消息、调用 AI 服务、接收 AI 回复、错误处理等流程，以及对 apiKey、baseURL 等关键点的解释