Anfängerleitfaden: Erstellen einer Newsletter-App mit Vue und Firebase Cloud Firestore

Anleitung für die ersten Schritte: Erstellen einer Newsletter-Anwendung mit Vue und Firebase Cloud Firestore

Einführung:
Mit der rasanten Entwicklung des Internets sind Newsletter-Anwendungen für Menschen zu einer gängigen Möglichkeit geworden, Nachrichteninformationen zu erhalten. In diesem Artikel erfahren Sie, wie Sie mit dem Vue-Framework und Firebase Cloud Firestore eine einfache und benutzerfreundliche Newsletter-Anwendung erstellen. Wir erklären Ihnen Schritt für Schritt die Funktionsweise jedes Links im Detail und stellen Ihnen konkrete Codebeispiele zur Verfügung. Keine Sorge, selbst ein Anfänger ohne Erfahrung in der Webentwicklung kann mit diesem Artikel schnell loslegen.

Schritt 1: Vorbereitung

1. Erstellen Sie ein Firebase-Konto und melden Sie sich an.
2. Erstellen Sie ein neues Projekt in der Firebase-Konsole.
3. Rufen Sie in den Projekteinstellungen die erforderlichen Firebase-Konfigurationsinformationen ab, einschließlich Projekt-ID, API-Schlüssel und Datenbank-URL.

Schritt 2: Initialisieren Sie das Vue-Projekt

1. Führen Sie das Befehlszeilentool aus und erstellen Sie ein neues Projekt mit der Vue-CLI.

   vue create news-app

2. Gehe in den Projektordner.

   cd news-app

3. Installieren Sie die Abhängigkeitspakete Firebase und Firebase Cloud Firestore.

   npm install firebase vuefire

Schritt 3: Firebase verbinden

1. Erstellen Sie eine Datei mit dem Namen firebase.js im Stammverzeichnis des Projekts und geben Sie die Firebase-Konfigurationsinformationen ein. 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

Fügen Sie die Datei firebase.js in die Datei main.js von Vue ein.

rrreee

🎜🎜Schritt 4: Vue-Komponenten erstellen🎜🎜🎜Erstellen Sie einen Ordner mit dem Namen components im Ordner src, um Vue-Komponentendateien zu speichern. 🎜🎜🎜Erstellen Sie eine Datei mit dem Namen NewsList.vue im Ordner components, um die Newsletter-Liste anzuzeigen. 🎜rrreee🎜🎜🎜Fügen Sie die gerade erstellte NewsList-Komponente in App.vue ein. 🎜rrreee🎜🎜🎜Schritt 5: Firebase Cloud Firestore-Datenbank erstellen🎜🎜🎜Öffnen Sie in der Firebase-Konsole Cloud Firestore. 🎜🎜Erstellen Sie eine Sammlung namens news, um Newsletter-Daten zu speichern. 🎜🎜🎜Erstellen Sie ein Dokument in der Sammlung und fügen Sie die folgenden Felder hinzu: 🎜

🎜title: Newsletter-Titel 🎜🎜content: Newsletter-Inhalt 🎜🎜timestamp : Zeitstempel veröffentlichen (zum Sortieren nach Zeit) 🎜

🎜🎜🎜An diesem Punkt haben wir den Prozess der Erstellung einer Newsletter-Anwendung abgeschlossen. Jetzt können Sie die Anwendung starten, indem Sie den folgenden Befehl ausführen und localhost:8080 aufrufen, um den Anwendungseffekt anzuzeigen. 🎜rrreee🎜In diesem Artikel geht es nur um die Erstellung einer einfachen Newsletter-Anwendung. Sie können Ihre Anwendung nach Bedarf skalieren und optimieren. Ich hoffe, dass Sie mit der Anleitung dieses Artikels erfolgreich mit Vue und Firebase Cloud Firestore beginnen und schnell eine praktische Newsletter-Anwendung entwickeln können. 🎜🎜Schlüsselwörter: Vue, Firebase, Cloud Firestore, Newsletter, Anfängerleitfaden🎜

Das obige ist der detaillierte Inhalt vonAnfängerleitfaden: Erstellen einer Newsletter-App mit Vue und Firebase Cloud Firestore. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!