Panduan Pemula: Mencipta Apl Surat Berita Menggunakan Vue dan Firebase Cloud Firestore

Panduan bermula: Buat aplikasi surat berita menggunakan Vue dan Firebase Cloud Firestore

Pengenalan:
Dengan kelajuan tinggi Internet Dengan perkembangan, aplikasi surat berita telah menjadi cara biasa bagi orang ramai untuk mendapatkan maklumat berita. Artikel ini akan memperkenalkan cara membuat aplikasi surat berita yang ringkas dan mudah digunakan menggunakan rangka kerja Vue dan Firebase Cloud Firestore. Kami akan menerangkan operasi setiap pautan secara terperinci langkah demi langkah dan memberikan contoh kod khusus. Jangan risau, walaupun orang baru yang tidak mempunyai pengalaman pembangunan web boleh bermula dengan cepat melalui artikel ini.

Langkah Pertama: Persediaan

1. Buat akaun Firebase dan log masuk.
2. Buat projek baharu dalam konsol Firebase.
3. Dapatkan maklumat konfigurasi Firebase yang diperlukan dalam tetapan projek, termasuk ID projek, kunci API dan URL pangkalan data.

Langkah 2: Mulakan projek Vue

1. Jalankan alat baris arahan dan gunakan Vue CLI untuk mencipta projek baharu .

   vue create news-app

2. Masukkan folder projek.

   cd news-app

3. Pasang pakej pergantungan Firebase dan Firebase Cloud Firestore.

   npm install firebase vuefire

Langkah 3: Sambung ke Firebase

1. Buat fail bernama firebase /code> fail dan isi maklumat konfigurasi Firebase. firebase.js的文件，并将Firebase配置信息填入其中。

   // firebase.js
   
   import firebase from 'firebase/app'
   import 'firebase/firestore'
   
   const firebaseConfig = {
     apiKey: 'YOUR_API_KEY',
     authDomain: 'YOUR_AUTH_DOMAIN',
     databaseURL: 'YOUR_DATABASE_URL',
     projectId: 'YOUR_PROJECT_ID',
     storageBucket: 'YOUR_STORAGE_BUCKET',
     messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
     appId: 'YOUR_APP_ID'
   }
   
   // 初始化Firebase
   firebase.initializeApp(firebaseConfig)
   
   // 导出Firebase实例
   export const db = firebase.firestore()

2. 在Vue的main.js文件中引入firebase.js文件。

   // main.js
   
   import Vue from 'vue'
   import App from './App.vue'
   import './firebase'
   
   new Vue({
     render: h => h(App)
   }).$mount('#app')

第四步：创建Vue组件

1. 在src文件夹下创建一个名为components的文件夹，用于存放Vue组件文件。

2. 在components文件夹下创建一个名为NewsList.vue的文件，用于显示时事通讯列表。

   <!-- NewsList.vue -->
   
   <template>
     <div>
       <h1>时事通讯列表</h1>
       <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: []
       }
     },
     created() {
       // 获取并监听时事通讯列表
       db.collection('news')
         .orderBy('timestamp', 'desc')
         .onSnapshot(querySnapshot => {
           this.newsList = querySnapshot.docs.map(doc => doc.data())
         })
     }
   }
   </script>

3. 在App.vue中引入刚刚创建的NewsList组件。

   <!-- App.vue -->
   
   <template>
     <div>
       <NewsList />
     </div>
   </template>
   
   <script>
   import NewsList from './components/NewsList.vue'
   
   export default {
     components: {
       NewsList
     }
   }
   </script>

第五步：创建Firebase Cloud Firestore数据库

1. 在Firebase控制台中，打开Cloud Firestore。
2. 创建一个名为news的集合，用于存放时事通讯数据。

3. 在集合中创建一个文档，并添加以下字段：

   • title：时事通讯标题
   • content：时事通讯内容
   • timestamp：发布时间戳（以便按时间排序）

至此，我们已经完成了时事通讯应用的搭建过程。现在，你可以通过运行如下命令启动应用，并访问localhost:8080

npm run serve

Perkenalkan fail firebase.js ke dalam fail main.js Vue.

rrreee

#🎜🎜##🎜🎜#Langkah 4: Buat komponen Vue #🎜🎜##🎜🎜##🎜🎜#Buat satu di bawah folder src A folder bernama komponen digunakan untuk menyimpan fail komponen Vue. #🎜🎜##🎜🎜##🎜🎜#Buat fail bernama NewsList.vue di bawah folder komponen untuk memaparkan senarai surat berita. #🎜🎜#rrreee#🎜🎜##🎜🎜##🎜🎜#Perkenalkan komponen NewsList yang baru dibuat ke dalam App.vue. #🎜🎜#rrreee#🎜🎜##🎜🎜##🎜🎜#Langkah 5: Buat pangkalan data Firebase Cloud Firestore #🎜🎜##🎜🎜##🎜🎜#Dalam konsol Firebase, buka Cloud Firestore. #🎜🎜##🎜🎜#Buat koleksi bernama berita untuk menyimpan data surat berita. #🎜🎜##🎜🎜##🎜🎜#Buat dokumen dalam koleksi dan tambah medan berikut: #🎜🎜#

#🎜🎜#tajuk: Tajuk surat berita #🎜🎜 # #🎜🎜#kandungan: Kandungan surat berita #🎜🎜##🎜🎜#cap masa: Terbitkan cap masa (untuk mengisih mengikut masa) #🎜🎜#

#🎜 🎜##🎜🎜##🎜🎜#Pada ketika ini, kami telah menyelesaikan proses membina aplikasi surat berita. Sekarang, anda boleh memulakan aplikasi dengan menjalankan arahan berikut dan lawati localhost:8080 untuk melihat kesan aplikasi. #🎜🎜#rrreee#🎜🎜#Artikel ini hanya merangkumi pembuatan aplikasi surat berita yang mudah. Anda boleh menskalakan dan mengoptimumkan aplikasi anda mengikut keperluan. Saya berharap melalui panduan artikel ini, anda boleh berjaya bermula dengan Vue dan Firebase Cloud Firestore, serta membangunkan aplikasi surat berita praktikal dengan cepat. #🎜🎜##🎜🎜#Kata kunci: Vue, Firebase, Cloud Firestore, surat berita, panduan pemula #🎜🎜#

Atas ialah kandungan terperinci Panduan Pemula: Mencipta Apl Surat Berita Menggunakan Vue dan Firebase Cloud Firestore. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!