VUE3入门实例：构建一个简单的即时通讯应用程序-Vue.js-PHP中文网

VUE3入门实例：构建一个简单的即时通讯应用程序

PHPz

发布： 2023-06-15 20:52:40

原创

1598人浏览过

vue3是目前最先进的javascript框架之一，它是vue.js的下一代版本。vue3不仅提供了更好的性能和更丰富的功能，还提供了更好的开发体验。在本篇文章中，我们将介绍如何使用vue3来构建一个简单的即时通讯应用程序。

确定应用程序结构

在开始构建应用程序之前，我们需要确定应用程序的结构。在我们的示例应用程序中，我们将创建以下组件：

App.vue：应用程序主组件，负责显示所有其他组件。
ChatList.vue：显示与用户相关的聊天列表。
ChatMessage.vue：显示单个聊天消息。
ChatInput.vue：提供用户与消息进行交互的输入组件。

创建应用程序

在开始构建应用程序之前，请确保在计算机上安装了最新版本的Node.js和Vue CLI。

要创建应用程序，请使用Vue CLI并运行以下命令：

vue create chat-app

登录后复制

这将创建一个新的Vue3应用程序。然后，您需要跟随屏幕上的提示并选择以下选项：

立即学习“前端免费学习笔记（深入）”；

选择手动安装功能
选择Babel和Router
选择“ESLint+Prettier”安装问题后面的“空格”
选择“Lint and fix on commit”

创建组件

接下来，我们需要创建应用程序的组件。您可以在/src/components/目录下创建以下文件：

App.vue

<template>
  <div class="chat-app">
    <ChatList />
    <ChatInput />
  </div>
</template>

<script>
import ChatList from "./ChatList";
import ChatInput from "./ChatInput";

export default {
  name: "App",
  components: {
    ChatList,
    ChatInput,
  },
};
</script>

<style>
.chat-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}
</style>

登录后复制

ChatList.vue

<template>
  <div class="chat-list">
    <ChatMessage v-for="message in messages" :key="message.id" :message="message" />
  </div>
</template>

<script>
import ChatMessage from "./ChatMessage";

export default {
  name: "ChatList",
  components: {
    ChatMessage,
  },
  data() {
    return {
      messages: [
        { id: 1, text: "Hello", author: "Alice" },
        { id: 2, text: "Hi there", author: "Bob" },
      ],
    };
  },
};
</script>

<style>
.chat-list {
  height: calc(100% - 64px);
  overflow-y: scroll;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
</style>

登录后复制

ChatMessage.vue

<template>
  <div class="chat-message">
    <div class="chat-message-author">{{ message.author }}</div>
    <div class="chat-message-text">{{ message.text }}</div>
  </div>
</template>

<script>
export default {
  name: "ChatMessage",
  props: {
    message: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style>
.chat-message {
  margin-bottom: 8px;
}

.chat-message-author {
  font-weight: bold;
  margin-bottom: 4px;
}

.chat-message-text {
  font-size: 16px;
}
</style>

登录后复制

ChatInput.vue

<template>
  <div class="chat-input">
    <input type="text" v-model="message" @keyup.enter="sendMessage" />
    <button @click="sendMessage">Send</button>
  </div>
</template>

<script>
export default {
  name: "ChatInput",
  data() {
    return {
      message: "",
    };
  },
  methods: {
    sendMessage() {
      this.$emit("send", this.message);
      this.message = "";
    },
  },
};
</script>

<style>
.chat-input {
  display: flex;
  height: 64px;
  padding: 16px;
}

.chat-input input {
  flex: 1;
  border-radius: 4px 0 0 4px;
  border: none;
  padding: 8px;
  font-size: 16px;
}

.chat-input button {
  border-radius: 0 4px 4px 0;
  border: none;
  background-color: #007aff;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  cursor: pointer;
}
</style>

登录后复制

在父组件中处理状态

在我们的应用程序中，需要跨多个组件进行数据共享。因此，我们可以在父组件中设置状态并将其传递给所有子组件。在App.vue中，我们将添加以下代码：

<script>
import ChatList from "./ChatList";
import ChatInput from "./ChatInput";

export default {
  name: "App",
  components: {
    ChatList,
    ChatInput,
  },
  data() {
    return {
      messages: [
        { id: 1, text: "Hello", author: "Alice" },
        { id: 2, text: "Hi there", author: "Bob" },
      ],
    };
  },
  methods: {
    sendMessage(message) {
      const newMessage = {
        id: this.messages.length + 1,
        text: message,
        author: "You",
      };
      this.messages.push(newMessage);
    },
  },
};
</script>

登录后复制

此代码将初始化messages数组并添加sendMessage方法，该方法将接收每个消息并将其添加到messages数组中。

在子组件中处理事件

现在，我们需要在子组件中处理sendMessage事件并将其发送到父组件。在ChatInput.vue中，我们将添加以下代码：

<script>
export default {
  name: "ChatInput",
  data() {
    return {
      message: "",
    };
  },
  methods: {
    sendMessage() {
      this.$emit("send", this.message);
      this.message = "";
    },
  },
};
</script>

登录后复制

此代码将在用户发送消息时触发send事件，并将消息文本作为参数发送回父组件。

在子组件中显示数据

最后，我们需要在子组件中显示数据。在ChatMessage.vue和ChatList.vue中，我们将使用以下代码：

<ChatMessage v-for="message in messages" :key="message.id" :message="message" />

登录后复制

此代码将根据messages数组中的内容显示ChatMessage组件。

运行应用程序

现在，我们的应用程序已经准备就绪。要运行应用程序，请运行以下命令：

npm run serve

登录后复制

这将在本地开发服务器上启动应用程序，并可以通过 http://localhost:8080/ 访问。

总结

本文介绍了如何使用Vue3构建一个简单的即时通讯应用程序。我们了解了如何使用Vue CLI创建应用程序和组件，以及如何在父组件中设置状态，并在子组件中处理事件和显示数据。通过本文，您可以了解如何使用Vue3开发现代、交互式的Web应用程序，为您的下一个项目打下坚实基础。

以上就是VUE3入门实例：构建一个简单的即时通讯应用程序的详细内容，更多请关注php中文网其它相关文章！