Heim > Artikel > Web-Frontend > 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
Schritt 2: Initialisieren Sie das Vue-Projekt
Führen Sie das Befehlszeilentool aus und erstellen Sie ein neues Projekt mit der Vue-CLI.
vue create news-app
Gehe in den Projektordner.
cd news-app
Installieren Sie die Abhängigkeitspakete Firebase und Firebase Cloud Firestore.
npm install firebase vuefire
Schritt 3: Firebase verbinden
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()
在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组件
src
文件夹下创建一个名为components
的文件夹,用于存放Vue组件文件。在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>
在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数据库
news
的集合,用于存放时事通讯数据。在集合中创建一个文档,并添加以下字段:
title
:时事通讯标题content
:时事通讯内容timestamp
:发布时间戳(以便按时间排序)至此,我们已经完成了时事通讯应用的搭建过程。现在,你可以通过运行如下命令启动应用,并访问localhost:8080
npm run serveFü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 Namencomponents
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) 🎜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!