Contoh Permulaan VUE3: Bina aplikasi pemesejan segera yang ringkas

Vue3 ialah salah satu rangka kerja JavaScript paling maju pada masa ini dan ia merupakan versi generasi seterusnya bagi Vue.js. Vue3 bukan sahaja menyediakan prestasi yang lebih baik dan ciri yang lebih kaya, tetapi juga menyediakan pengalaman pembangunan yang lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue3 untuk membina aplikasi pemesejan segera yang mudah.

1. Tentukan struktur aplikasi

Sebelum kita mula membina aplikasi, kita perlu menentukan struktur aplikasi. Dalam aplikasi sampel kami, kami akan mencipta komponen berikut:

• App.vue: Komponen aplikasi utama, bertanggungjawab untuk memaparkan semua komponen lain.
• ChatList.vue: Memaparkan senarai sembang yang berkaitan dengan pengguna.
• ChatMessage.vue: Paparkan satu mesej sembang.
• ChatInput.vue: Menyediakan komponen input untuk pengguna berinteraksi dengan mesej.

2. Membuat Apl

Sebelum anda mula membina apl anda, pastikan anda memasang versi terkini Node.js dan Vue CLI pada komputer anda.

Untuk mencipta aplikasi, gunakan Vue CLI dan jalankan arahan berikut:

vue create chat-app

Ini akan mencipta aplikasi Vue3 baharu. Anda kemudiannya perlu mengikut gesaan pada skrin dan pilih pilihan berikut:

• Pilih ciri pemasangan manual
• Pilih Babel dan Penghala
• Pilih "ESLint +Prettier" pemasangan "Ruang" selepas soalan
• Pilih "Lint and fix on commit"

3. Cipta komponen

Seterusnya, kami perlu mencipta komponen Program aplikasi. Anda boleh mencipta fail berikut dalam direktori /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>

4. Kendalikan keadaan dalam komponen induk

Dalam aplikasi kami, perkongsian data merentas berbilang komponen diperlukan. Jadi kita boleh menetapkan keadaan dalam komponen induk dan menyampaikannya kepada semua komponen anak. Dalam App.vue kami akan menambah kod berikut:

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

Kod ini akan memulakan tatasusunan mesej dan menambah kaedah sendMessage yang akan menerima setiap mesej dan menambahkannya pada tatasusunan mesej.

5. Mengendalikan acara dalam komponen anak

Sekarang, kita perlu mengendalikan acara sendMessage dalam komponen anak dan menghantarnya kepada komponen induk. Dalam ChatInput.vue, kami akan menambah kod berikut:

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

Kod ini akan mencetuskan acara hantar apabila pengguna menghantar mesej dan menghantar semula teks mesej kepada komponen induk sebagai parameter.

6. Paparkan data dalam komponen kanak-kanak

Akhir sekali, kami perlu memaparkan data dalam komponen kanak-kanak. Dalam ChatMessage.vue dan ChatList.vue, kami akan menggunakan kod berikut:

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

Kod ini akan memaparkan komponen ChatMessage berdasarkan kandungan dalam tatasusunan mesej.

7. Jalankan aplikasi

Sekarang, aplikasi kami sudah sedia. Untuk menjalankan aplikasi, jalankan arahan berikut:

npm run serve

Ini akan melancarkan aplikasi pada pelayan pembangunan tempatan, boleh diakses di http://localhost:8080/.

Ringkasan

Artikel ini memperkenalkan cara menggunakan Vue3 untuk membina aplikasi pemesejan segera yang ringkas. Kami belajar cara membuat aplikasi dan komponen menggunakan Vue CLI, dan cara menetapkan keadaan dalam komponen induk dan mengendalikan acara serta memaparkan data dalam komponen anak. Melalui artikel ini, anda boleh belajar cara menggunakan Vue3 untuk membangunkan aplikasi web moden yang interaktif dan meletakkan asas yang kukuh untuk projek anda yang seterusnya.

Atas ialah kandungan terperinci Contoh Permulaan VUE3: Bina aplikasi pemesejan segera yang ringkas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!