VUE3入門實例：建立一個簡單的即時通訊應用程式

Vue3是目前最先進的JavaScript框架之一，它是Vue.js的下一代版本。 Vue3不僅提供了更好的性能和更豐富的功能，還提供了更好的開發體驗。在本篇文章中，我們將介紹如何使用Vue3來建立一個簡單的即時通訊應用程式。

1. 確定應用程式結構

在開始建立應用程式之前，我們需要確定應用程式的結構。在我們的範例應用程式中，我們將建立以下元件：

• App.vue：應用程式主元件，負責顯示所有其他元件。
• ChatList.vue：顯示與使用者相關的聊天清單。
• ChatMessage.vue：顯示單一聊天訊息。
• ChatInput.vue：提供使用者與訊息互動的輸入元件。

2. 建立應用程式

在開始建立應用程式之前，請確保在電腦上安裝了最新版本的Node.js和Vue CLI。

要建立應用程序，請使用Vue CLI並執行以下命令：

vue create chat-app

這將建立一個新的Vue3應用程式。然後，您需要跟隨螢幕上的提示並選擇以下選項：

• 選擇手動安裝功能
• #選擇Babel和Router
• 選擇「ESLint Prettier」安裝問題後面的「空格」
• 選擇「Lint and fix on commit」

3. #建立元件

##接下來，我們需要建立應用程式的組件。您可以在/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中文網其他相關文章！