Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Olá a todos, hoje exploraremos como construir uma página de conversação de IA do zero usando Vue 3. Este processo não apenas nos permitirá compreender os novos recursos do Vue 3, mas também nos dará uma nova compreensão da construção de aplicações web interativas. Se você é novo em programação, não se preocupe, usarei uma linguagem fácil de entender para garantir que você siga cada passo.

Etapa 1: construir um projeto Vue 3

Primeiro, precisamos configurar o ambiente de engenharia do Vue 3. Presume-se que você tenha o Node.js e o npm (gerenciador de pacotes Node) instalados.Se ainda não estiver instalado, vá paranodejs.orgBaixe e instale-o.

Abra sua ferramenta de linha de comando e digite o seguinte comando para criar um novo projeto Vue 3:

npm install -g @vue/cli vue create my-ai-chat-app

Siga as instruções para selecionar as opções predefinidas do Vue 3 e aguarde a criação do projeto.

Passo Dois: Visão Geral da Estrutura do Projeto

Após a conclusão da criação,my-ai-chat-appA estrutura básica do projeto é a seguinte:

my-ai-chat-app
│   README.md
│   package.json
│
├───node_modules
├───public
└───src
    │   App.vue
    │   main.js
    │
    ├───assets
    ├───components

        │   ChatInput.vue
    ├───router

        │   index.js
    ├───store
    └───views

        │   Chat.vue

Etapa 3: escrever a página de diálogo da IA

A seguir, escreveremos o código principal da página de conversação de IA.Primeiro, vamos abrirsrc/App.vuearquivo, este é nosso arquivo de componente de entrada.

<template>
  <div id="app">
    <router-view />
  </div>
</template>

Este modelo é muito simples, contém apenas umrouter-view, que é um espaço reservado para o Vue Router usado para renderizar componentes de rota correspondentes.

Componente ChatInput

Agora, criamos umChatInput.vue Componente para envio de mensagens.Abrirsrc/components/ChatInput.vuearquivo e adicione o seguinte código:

<template>
  <div>
    <!-- 消息展示 -->
    <div>{{ message.text }}</div>
    <!-- 输入框 -->
    <input v-model="message.text" placeholder="Type a message">
    <!-- 发送按钮 -->
    <button @click="sendMessage">Send</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: {
        text: ''
      }
    };
  },
  methods: {
    sendMessage() {
      // 这里将添加发送消息的逻辑
      console.log('Sending message:', this.message.text);
      this.message.text = ''; // 清空输入框
    }
  }
};
</script>

Este componente possui um modelo de dadosmessage, contém umtext Propriedade, usada para vincular a caixa de entrada.Ainda há umsendMessageMétodo, utilizado para tratar a lógica de envio de mensagens.

configuração main.js

Finalmente, precisamossrc/main.jsApresente e use Vue Router e Vuex, bem como nossoAppcomponentes.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
 
createApp(App).use(store).use(router).mount('#app');

Aqui usamos a API Composition do Vue 3, atravéscreateAppfunção para criar uma instância de aplicativo e usaruseMétodo instalado Vue Router e Vuex.

Etapa 4: como executar seu aplicativo Vue 3

Agora que nossa página de conversação sobre IA está pronta, a próxima etapa é como executá-la.

1. Abra a ferramenta de linha de comando e navegue até o diretório do seu projeto.
2. Execute o seguinte comando para iniciar o servidor de desenvolvimento:

npm run serve

Após a execução do comando, você normalmente verá a seguinte saída, solicitando que você passelocalhostEndereço para acessar seu aplicativo:

DONE Compiled successfully in Xms App running at: - Local: http://localhost:8080/ - Network: http://<network-address>:8080/

Abra seu navegador e visitehttp://localhost:8080/, você verá sua página de conversação de IA.

Como solicitar o código completo

Se você deseja obter o código completo para entender melhor a estrutura e lógica de todo o projeto, verifiqueDeixe seu e-mail na área de comentários。

Conclusão

Hoje aprendemos como usar o Vue 3 para construir uma página simples de conversação de IA.Esta é apenas uma introdução ao efeito de página estática. Sobre como acessar o modelo grande e realizar a função real de diálogo da IA, consulte este artigo que escrevi.Como criar um miniaplicativo WeChat de diálogo de IA a custo zero (código-fonte anexado)