Building future conversations: Implementing an AI chat page based on Vue 3 from scratch

2024-07-12

Hello everyone, today we will explore how to build an AI conversation page from scratch using Vue 3. This process will not only let us understand the new features of Vue 3, but also give us a new understanding of building interactive web applications. If you are a novice in programming, don't worry, I will use easy-to-understand language to ensure that you can follow every step.

Step 1: Build a Vue 3 project

First, we need to set up the Vue 3 project environment. It is assumed that you have installed Node.js and npm (Node package manager). If not, go tonodejs.orgDownload and install it.

Open your command line tool and enter the following command to create a new Vue 3 project:

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

Follow the prompts to select the Vue 3 preset options and wait for the project to be created.

Step 2: Overview of the project structure

After creation,my-ai-chat-appThe basic structure of the project is as follows:

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

Step 3: Write the AI dialogue page

Next, we will write the core code for the AI dialogue page. First, let's opensrc/App.vueFile, this is our entry component file.


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

This template is very simple, it only contains arouter-view, which is a placeholder for Vue Router to render matching route components.

ChatInput Component

Now, we create aChatInput.vueComponent used to send messages. Opensrc/components/ChatInput.vuefile and add the following code:


<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>

This component has a data modelmessage, including atextProperty, used to bind the input box. There is also asendMessageMethod, used to handle the logic of sending messages.

main.js configuration

Finally, we need tosrc/main.jsIntroduce and use Vue Router and Vuex, as well as ourAppComponent.


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');

Here we use the Composition API of Vue 3.createAppFunction creates an application instance and usesuseThe method installs Vue Router and Vuex.

Step 4: How to run your Vue 3 application

Now that our AI conversation page is ready, the next step is how to run it.

Open the command line tool and navigate to your project directory.
Execute the following command to start the development server:

npm run serve

After the command is executed, you will usually see the following output, prompting you tolocalhostAccess your application at:

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

Open your browser and visithttp://localhost:8080/, you will see your AI conversation page.

How to request the full code

If you want to get the complete code to better understand the structure and logic of the whole project, pleaseLeave your email in the comment section。

Conclusion

Today we learned how to use Vue 3 to build a simple AI dialogue page. This only introduces the static page effect. For how to connect to a large model and realize the real AI dialogue function, please check out this article I wroteHow to create an AI dialogue WeChat applet at zero cost (with source code)

Technology Sharing