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中文網其他相關文章！