초보자 가이드: Vue 및 Firebase Cloud Firestore를 사용하여 뉴스레터 앱 만들기

시작 가이드: Vue 및 Firebase Cloud Firestore를 사용하여 뉴스레터 애플리케이션 만들기

소개:
인터넷의 급속한 발전으로 뉴스레터 애플리케이션은 사람들이 뉴스 정보를 얻는 일반적인 방법이 되었습니다. 이 기사에서는 Vue 프레임워크와 Firebase Cloud Firestore를 사용하여 간단하고 사용하기 쉬운 뉴스레터 애플리케이션을 만드는 방법을 소개합니다. 각 링크의 동작을 단계별로 자세히 설명하고 구체적인 코드 예시를 제공하겠습니다. 걱정하지 마십시오. 웹 개발 경험이 없는 초보자라도 이 기사를 통해 빠르게 시작할 수 있습니다.

1단계: 준비

1. Firebase 계정을 만들고 로그인하세요.
2. Firebase 콘솔에서 새 프로젝트를 만듭니다.
3. 프로젝트 설정에서 프로젝트 ID, API 키, 데이터베이스 URL 등 필수 Firebase 구성 정보를 가져옵니다.

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.js라는 파일을 만들고 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

rrreee

🎜title: 뉴스레터 제목 🎜🎜content: 뉴스레터 콘텐츠 🎜🎜timestamp : 타임스탬프 게시(시간별 정렬용) 🎜

위 내용은 초보자 가이드: Vue 및 Firebase Cloud Firestore를 사용하여 뉴스레터 앱 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!