npm install -g @vue/cli

vue create vue-firebase-chat

cd vue-firebase-chat

npm install firebase

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>實時聊天應用</h1>
    <ChatApp />
  </div>
</template>

<script>
import ChatApp from './components/ChatApp.vue';

export default {
  name: 'App',
  components: {
    ChatApp,
  },
};
</script>

<!-- src/components/ChatApp.vue -->
<template>
  <div>
    <div class="messages">
      <div v-for="message in messages" :key="message.id">
        <strong>{{ message.sender }}:</strong> {{ message.text }}
      </div>
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="輸入消息..." />
    <button @click="sendMessage">發(fā)送</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { db } from '../firebase';
import { collection, addDoc, onSnapshot } from 'firebase/firestore';

export default {
  setup() {
    const messages = ref([]);
    const newMessage = ref('');
    const messagesRef = collection(db, 'messages');

    const sendMessage = async () => {
      if (newMessage.value.trim() !== '') {
        await addDoc(messagesRef, {
          sender: '用戶', // 這里可以改成真實的用戶數(shù)據(jù)
          text: newMessage.value,
          timestamp: new Date()
        });
        newMessage.value = ''; // 清空輸入框
      }
    };

    const loadMessages = () => {
      onSnapshot(messagesRef, (snapshot) => {
        messages.value = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
      });
    };

    onMounted(() => {
      loadMessages();
    });

    return { messages, newMessage, sendMessage };
  }
};
</script>

<style scoped>
.messages {
  border: 1px solid #ccc;
  padding: 10px;
  height: 300px;
  overflow-y: scroll;
}
input {
  width: 80%;
  padding: 10px;
}
button {
  padding: 10px;
}
</style>

npm run serve