初心者ガイド: Vue と Firebase Cloud Firestore を使用したニュースレター アプリの作成

初心者ガイド: Vue と Firebase Cloud Firestore を使用したニュースレター アプリケーションの作成

はじめに:
インターネットの急速な発展に伴い、ニュースレター アプリケーションは最も重要なものになりました。ニュース情報を入手する一般的な方法。この記事では、Vue フレームワークと Firebase Cloud Firestore を使用して、シンプルで使いやすいニュースレター アプリケーションを作成する方法を紹介します。各リンクの動作を段階的に詳しく説明し、具体的なコード例を示します。心配しないでください。Web 開発の経験がない初心者でも、この記事を読めばすぐに始めることができます。

ステップ 1: 準備

1. Firebase アカウントを作成してログインします。
2. Firebase コンソールで新しいプロジェクトを作成します。
3. プロジェクト設定で必要な Firebase 構成情報 (プロジェクト ID、API キー、データベース URL など) を取得します。

ステップ 2: Vue プロジェクトを初期化する

1. コマンド ライン ツールを実行し、Vue CLI を使用して新しいプロジェクトを作成します。

   vue create news-app

2. プロジェクト フォルダーを入力します。

   cd news-app

3. Firebase および Firebase Cloud Firestore 依存関係パッケージをインストールします。

   npm install firebase vuefire

ステップ 3: Firebase に接続する

1. 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. firebase.js ファイルを Vue の main.js ファイルに導入します。

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

ステップ 4: 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. 作成したばかりの

   NewsList コンポーネントを App.vue に導入します。

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

ステップ 5: Firebase Cloud Firestore データベースを作成する

Firebase コンソールで、Cloud Firestore を開きます。
1. ニュースレター データを保存するために、
2. news という名前のコレクションを作成します。
3. コレクション内にドキュメントを作成し、次のフィールドを追加します:
   • title: ニュースレターのタイトル
   • content : ニュースレターのコンテンツ
   • #timestamp: 公開タイムスタンプ (時間順に並べ替えられるように)

これまでのところ、ニュースレター アプリケーションを構築するプロセスが完了しました。これで、次のコマンドを実行してアプリケーションを起動し、

localhost:8080 にアクセスしてアプリケーションの効果を確認できます。

npm run serve

この記事では、単純なニュースレター アプリケーションの作成についてのみ説明します。必要に応じてアプリケーションを拡張および最適化できます。この記事のガイダンスを通じて、Vue と Firebase Cloud Firestore をうまく使い始めて、実用的なニュースレター アプリケーションをすぐに開発できることを願っています。

キーワード: Vue、Firebase、Cloud Firestore、ニュースレター、初心者ガイド

以上が初心者ガイド: Vue と Firebase Cloud Firestore を使用したニュースレター アプリの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。