Guide du débutant : Création d'une application de newsletter avec Vue et Firebase Cloud Firestore

Guide de démarrage : Création d'une application de newsletter à l'aide de Vue et Firebase Cloud Firestore

Introduction :
Avec le développement rapide d'Internet, les applications de newsletter sont devenues un moyen courant pour les gens d'obtenir des informations d'actualité. Cet article explique comment créer une application de newsletter simple et facile à utiliser à l'aide du framework Vue et de Firebase Cloud Firestore. Nous expliquerons le fonctionnement de chaque lien en détail étape par étape et fournirons des exemples de code spécifiques. Ne vous inquiétez pas, même un novice sans expérience en développement Web peut se lancer rapidement grâce à cet article.

Étape 1 : Préparation

1. Créez un compte Firebase et connectez-vous.
2. Créez un nouveau projet dans la console Firebase.
3. Obtenez les informations de configuration Firebase requises dans les paramètres du projet, y compris l'ID du projet, la clé API et l'URL de la base de données.

Étape 2 : Initialisez le projet Vue

1. Exécutez l'outil de ligne de commande et créez un nouveau projet à l'aide de Vue CLI.

   vue create news-app

2. Allez dans le dossier du projet.

   cd news-app

3. Installez les packages de dépendances Firebase et Firebase Cloud Firestore.

   npm install firebase vuefire

Étape 3 : Connectez Firebase

1. Créez un fichier nommé firebase.js dans le répertoire racine du projet et remplissez les informations de configuration de 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

Introduisez le fichier firebase.js dans le fichier main.js de Vue.

rrreee

🎜🎜Étape 4 : Créer des composants Vue🎜🎜🎜Créez un dossier nommé components sous le dossier src pour stocker les fichiers de composants Vue. 🎜🎜🎜Créez un fichier nommé NewsList.vue sous le dossier components pour afficher la liste des newsletters. 🎜rrreee🎜🎜🎜Introduisez le composant NewsList qui vient d'être créé dans App.vue. 🎜rrreee🎜🎜🎜Étape 5 : Créer une base de données Firebase Cloud Firestore🎜🎜🎜Dans la console Firebase, ouvrez Cloud Firestore. 🎜🎜Créez une collection nommée news pour stocker les données de la newsletter. 🎜🎜🎜Créez un document dans la collection et ajoutez les champs suivants : 🎜

🎜title : Titre de la newsletter 🎜🎜content : Contenu de la newsletter 🎜🎜timestamp  : Publier des horodatages (pour trier par heure) 🎜

🎜🎜🎜À ce stade, nous avons terminé le processus de création d'une application de newsletter. Maintenant, vous pouvez démarrer l'application en exécutant la commande suivante et visiter localhost:8080 pour afficher l'effet de l'application. 🎜rrreee🎜Cet article couvre uniquement la création d'une simple application de newsletter. Vous pouvez faire évoluer et optimiser votre application selon vos besoins. J'espère que grâce aux conseils de cet article, vous pourrez démarrer avec succès avec Vue et Firebase Cloud Firestore et développer rapidement une application de newsletter pratique. 🎜🎜Mots clés : Vue, Firebase, Cloud Firestore, Newsletter, Guide du débutant🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!