So erstellen Sie eine responsive Newsletter-App mit Vue und Firebase Cloud Firestore

So erstellen Sie eine responsive Newsletter-Anwendung mit Vue und Firebase Cloud Firestore

Vorwort:
Mit der rasanten Entwicklung des Internets wird die Verbreitung von Nachrichteninformationen immer schneller. Als moderne Menschen möchten wir immer so schnell wie möglich über alle möglichen aktuellen Nachrichten informiert sein. In diesem Artikel beschreibe ich, wie man mit Vue und Firebase Cloud Firestore eine responsive Newsletter-App erstellt.

Was ist Vue und Firebase Cloud Firestore:
Vue ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es verwendet ein komponentenbasiertes Entwicklungsmodell, um uns dabei zu helfen, interaktive Webanwendungen einfacher zu erstellen.

Firebase ist eine von Google bereitgestellte Cloud-Service-Plattform, bei der Cloud Firestore eine flexible und skalierbare NoSQL-Datenbank ist, die uns beim Aufbau des Backends unserer Anwendungen unterstützen soll.

Vorbereitung:
Bevor wir beginnen, müssen wir Vue und Firebase installieren. Die Vue CLI kann mit dem folgenden Befehl installiert werden:

npm install -g @vue/cli

Dann müssen wir ein neues Vue-Projekt erstellen:

vue create news-app

Als nächstes müssen wir ein neues Projekt in der Firebase-Konsole erstellen und die Cloud Firestore-Datenbank aktivieren.

Firebase Cloud Firestore einrichten:
Klicken Sie in der Firebase-Konsole auf die Schaltfläche „Neue Firestore-Datenbank erstellen“ und wählen Sie „Start“.

Wählen Sie im Dialogfeld „Datenbank erstellen“ die Option „Im Testmodus starten“ und klicken Sie auf „Weiter“.

Wählen Sie als Nächstes einen Datenbankspeicherort aus und klicken Sie auf „Weiter“.

Klicken Sie abschließend auf „Start“.

Klicken Sie in der Konsole auf die Schaltfläche „Einstellungen“ und wählen Sie „Projekteinstellungen“.

Scrollen Sie auf der Registerkarte „Allgemein“ nach unten zum Abschnitt „Ihre App“ und wählen Sie unter „Folgendes importieren“ Vue.js aus.

Dann kopieren Sie den Inhalt der Konfigurationsdatei in die Datei .env.local Ihres Vue-Projekts. .env.local文件中。

安装Firebase:
在Vue项目的根目录下，使用以下命令安装Firebase:

npm install firebase

然后，在src/main.js文件中导入Firebase和Firestore:

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

// 初始化FirebaseApp
firebase.initializeApp({
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
})

// 创建Firestore实例
const db = firebase.firestore()

// 导出Firestore实例
export default db

构建新闻通讯应用:
首先，我们需要创建一个用于显示新闻的组件News.vue，并在Vue项目的src/components目录下创建。

在News.vue中，我们将使用Vue的computed属性来从Firebase中获取最新的新闻数据，并使用Vue的v-for指令循环渲染每个新闻条目。

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

<script>
import db from '@/main'

export default {
  name: 'News',
  computed: {
    latestNews() {
      return db.collection('news')
        .orderBy('date', 'desc')
        .limit(10)
        .get()
        .then(querySnapshot => {
          const news = []
          querySnapshot.forEach(doc => {
            news.push({
              id: doc.id,
              ...doc.data()
            })
          })
          return news
        })
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

li {
  margin-bottom: 20px;
}

h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  margin-bottom: 10px;
}
</style>

然后，在Vue项目的根目录下的App.vue文件中使用News组件:

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

<script>
import News from '@/components/News'

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

编译和运行:
我们只需使用以下命令在本地编译和运行Vue项目:

npm run serve

然后，打开浏览器并访问http://localhost:8080

Firebase installieren:

Verwenden Sie im Stammverzeichnis des Vue-Projekts den folgenden Befehl, um Firebase zu installieren:
rrreee

Dann importieren Sie Firebase und Firestore in die Datei src/main.js:🎜rrreee 🎜Erstellen Sie eine Anwendung für die Nachrichtenkommunikation: 🎜Zuerst müssen wir eine Komponente News.vue zum Anzeigen von Nachrichten erstellen und diese im Verzeichnis src/components des Vue-Projekts erstellen. 🎜🎜In News.vue verwenden wir das Attribut computed von Vue, um die neuesten Nachrichtendaten von Firebase abzurufen, und verwenden Vues v-for Der Befehl durchläuft jede Nachricht. 🎜rrreee🎜Dann verwenden Sie die Komponente <code>News in der Datei App.vue im Stammverzeichnis des Vue-Projekts: 🎜rrreee🎜Kompilieren und ausführen: 🎜Wir verwenden einfach die Folgender Befehl: Kompilieren Sie das Vue-Projekt und führen Sie es lokal aus: 🎜rrreee🎜 Öffnen Sie dann den Browser und besuchen Sie http://localhost:8080. Sie sehen eine Seite mit den neuesten Nachrichten. 🎜🎜Zusammenfassung:🎜In diesem Artikel wird erläutert, wie Sie mit Vue und Firebase Cloud Firestore eine responsive Newsletter-App erstellen. Zu den Weiterentwicklungen könnte die Möglichkeit gehören, Nachrichten hinzuzufügen und Benutzern automatisch Push-Benachrichtigungen zu senden, nachdem Nachrichten veröffentlicht wurden. Durch das Erlernen und Beherrschen dieser Technologien können wir praktischere und reaktionsfähigere Webanwendungen erstellen. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine responsive Newsletter-App mit Vue und Firebase Cloud Firestore. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!