Vue3编写仿微信聊天功能的完整指南

2023-11-17 11:27:13

前言

Vue3是一个渐进式JavaScript框架，在性能和开发人员体验方面都有很大改进。Vant-ui是一个移动端Vue3组件库，提供了丰富的UI组件，可以帮助您快速构建移动应用。

项目设置

首先，我们需要创建一个新的Vue3项目。可以使用Vue CLI工具来完成此操作。如果您还没有安装Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

安装完成后，可以使用以下命令创建一个新的Vue3项目：

vue create vue3-chat-app

这将创建一个新的Vue3项目，其中包含一个src目录，其中包含应用程序的源代码。

安装依赖项

接下来，我们需要安装Vant-ui和V3Popup依赖项。可以使用以下命令安装这些依赖项：

npm install vant v3popup

安装完成后，可以在src/main.js文件中导入Vant-ui和V3Popup：

import Vant from 'vant';
import V3Popup from 'v3popup';

Vue.use(Vant);
Vue.use(V3Popup);

构建聊天界面

现在我们可以开始构建聊天界面了。在src/App.vue文件中，我们可以添加以下代码：

<template>
  <div>
    <v-nav-bar title="聊天"></v-nav-bar>
    <v-list>
      <v-cell @click="showPopup">
        <v-avatar slot="icon" src="https://img.yzcdn.cn/vant/user-active.svg"></v-avatar>
        <span>张三</span>
      </v-cell>
      <v-cell @click="showPopup">
        <v-avatar slot="icon" src="https://img.yzcdn.cn/vant/user-active.svg"></v-avatar>
        <span>李四</span>
      </v-cell>
    </v-list>
    <v3-popup v-model="show" position="bottom" duration="300">
      <div>
        <v-chat-message text="你好啊，在吗？" type="self"></v-chat-message>
        <v-chat-message text="在的，有什么事吗？" type="other"></v-chat-message>
      </div>
    </v3-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    showPopup() {
      this.show = true
    }
  }
}
</script>

这段代码创建了一个导航栏、一个列表和一个弹层。列表中包含两个单元格，每个单元格代表一个聊天联系人。当点击一个单元格时，将显示一个弹层，其中包含两个聊天消息。

管理聊天状态

接下来，我们需要管理聊天状态。在src/store/index.js文件中，我们可以添加以下代码：

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    messages: []
  },
  mutations: {
    addMessage(state, message) {
      state.messages.push(message);
    }
  },
  actions: {
    sendMessage({ commit }, message) {
      commit('addMessage', message);
    }
  }
});

export default store;

这段代码创建了一个Vuex存储实例，其中包含一个名为messages的状态和一个名为addMessage的突变。addMessage突变用于将新消息添加到messages状态中。

处理聊天功能

最后，我们需要处理聊天功能。在src/components/Chat.vue文件中，我们可以添加以下代码：

<template>
  <div>
    <v-chat-message v-for="message in messages" :type="message.type" :text="message.text"></v-chat-message>
    <v-chat-input @send="sendMessage"></v-chat-input>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['messages'])
  },
  methods: {
    ...mapActions(['sendMessage']),
    sendChatInput(e) {
      if (e.keyCode === 13) {
        this.sendMessage({
          type: 'self',
          text: e.target.value
        });
        e.target.value = '';
      }
    }
  }
}
</script>