Tutorial Vue Firebase Cloud Firestore: Cara Membina Apl Surat Berita Masa Nyata

Vue Firebase Cloud Firestore Tutorial: Cara Membina Aplikasi Surat Berita Masa Nyata

Pengenalan:
Dengan populariti Internet dan pembangunan peranti mudah alih, aplikasi surat berita masa nyata menjadi semakin penting. Vue dan Firebase pada masa ini merupakan teknologi bahagian hadapan dan bahagian belakang yang sangat popular yang boleh digabungkan untuk membina aplikasi masa nyata yang berkuasa dengan cepat. Tutorial ini akan menunjukkan kepada anda cara menggunakan Vue dan Firebase Cloud Firestore untuk membina aplikasi surat berita masa nyata yang membolehkan pengguna mendapatkan berita dan acara terkini serta-merta.

Langkah Pertama: Buat Projek Firebase
Mula-mula, anda perlu membuat projek baharu pada konsol Firebase. Dalam konsol Firebase, anda boleh menemui butang "Tambah Projek" berwarna merah, klik padanya dan ikut gesaan untuk membuat projek baharu.

Langkah 2: Dayakan Pangkalan Data Firestore
Setelah anda membuat projek Firebase anda, anda perlu mendayakan Pangkalan Data Firestore. Dalam bahagian "Membangun" konsol Firebase, anda boleh menemui pilihan yang dipanggil "Firestore", klik padanya dan dayakan Firestore.

Langkah 3: Mulakan projek Vue
Sebelum anda mula membina aplikasi Vue anda, anda perlu memastikan anda telah memasang Vue CLI. Jika anda belum memasang Vue CLI lagi, anda boleh memasangnya dengan menjalankan arahan berikut daripada baris arahan:

npm install -g @vue/cli

Kemudian, buat projek Vue baharu:

vue create news-app

Semasa proses penciptaan, anda akan diminta untuk pilih beberapa pilihan konfigurasi. Anda boleh memilih berdasarkan keperluan anda atau menerima pilihan lalai.

Langkah 4: Pasang kebergantungan Firebase
Pergi ke folder projek Vue yang baru dibuat dan pasang kebergantungan Firebase:

cd news-app
npm install firebase

Langkah 5: Sediakan konfigurasi Firebase
Dalam bahagian tetapan projek pada konsol Firebase anda, anda akan mendapati terdapat pilihan yang dipanggil "Tambah Firebase pada aplikasi web anda". Klik padanya dan salin objek firebaseConfig anda.

Kemudian, dalam direktori akar projek Vue, buat fail yang dipanggil "firebase.js" dan tampal ini ke dalam fail:

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  // 粘贴您的firebaseConfig对象
};

firebase.initializeApp(firebaseConfig);

export const db = firebase.firestore();

Langkah 6: Buat komponen Vue
Dalam "src" projek Vue ” folder, buat folder bernama "komponen". Cipta fail bernama "NewsList.vue" dalam folder itu dan tambah kandungan berikut:

<template>
  <div>
    <h2>最新新闻</h2>
    <ul>
      <li v-for="news in newsList" :key="news.id">
        {{ news.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { db } from '../firebase';

export default {
  data() {
    return {
      newsList: []
    };
  },
  mounted() {
    db.collection('news')
      .orderBy('createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        this.newsList = [];
        querySnapshot.forEach(doc => {
          this.newsList.push(doc.data());
        });
      });
  }
};
</script>

Langkah 7: Menggunakan Komponen Vue
Dalam folder "src" projek Vue, buka fail "App.vue" dan gantikan yang berikut kandungan dengan kandungan sedia ada:

<template>
  <div id="app">
    <NewsList />
  </div>
</template>

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

export default {
  components: {
    NewsList
  }
};
</script>

Langkah 8: Susun dan Jalankan Apl
Jalankan arahan berikut untuk menyusun dan memulakan aplikasi Vue:

npm run serve

Kini anda boleh melawati http:// dalam penyemak imbas anda localhost:8080 dan lihat anda aplikasi berjalan dan memaparkan senarai berita daripada pangkalan data Firestore dalam masa nyata.

Kesimpulan:
Melalui gabungan Vue dan Firebase Cloud Firestore, kami boleh membina aplikasi surat berita masa nyata dengan cepat supaya pengguna boleh mendapatkan berita dan acara terkini serta-merta. Tutorial ini hanyalah contoh peringkat permulaan, anda boleh melanjutkannya lagi untuk menambah lebih banyak ciri dan meningkatkan pengalaman pengguna. Saya harap tutorial ini membantu dan saya doakan permohonan masa nyata anda berjaya!

Atas ialah kandungan terperinci Tutorial Vue Firebase Cloud Firestore: Cara Membina Apl Surat Berita Masa Nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!