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

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

WBOY

풀어 주다： 2023-09-13 08:23:02

원래의

858명이 탐색했습니다.

小白上手指南：使用Vue和Firebase Cloud Firestore创建时事通讯应用

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

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

1단계: 준비

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

2단계: Vue 프로젝트 초기화

명령줄 도구를 실행하고 Vue CLI를 사용하여 새 프로젝트를 만듭니다.
```
vue create news-app
```
로그인 후 복사
프로젝트 폴더로 이동하세요.
```
cd news-app
```
로그인 후 복사
Firebase 및 Firebase Cloud Firestore 종속성 패키지를 설치합니다.
```
npm install firebase vuefire
```
로그인 후 복사

3단계: Firebase 연결

프로젝트의 루트 디렉터리에 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()

로그인 후 복사

在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数据库

在Firebase控制台中，打开Cloud Firestore。
创建一个名为news的集合，用于存放时事通讯数据。
在集合中创建一个文档，并添加以下字段：
- title：时事通讯标题
- content：时事通讯内容
- timestamp：发布时间戳（以便按时间排序）

至此，我们已经完成了时事通讯应用的搭建过程。现在，你可以通过运行如下命令启动应用，并访问localhost:8080

npm run serve

로그인 후 복사

firebase.js 파일을 Vue의 main.js 파일에 도입하세요.

rrreee

🎜🎜4단계: Vue 구성 요소 만들기🎜🎜🎜Vue 구성 요소 파일을 저장하기 위해 src 폴더 아래에 comments라는 폴더를 만듭니다. 🎜🎜🎜뉴스레터 목록을 표시하려면 composites 폴더 아래에 NewsList.vue라는 파일을 생성하세요. 🎜rrreee🎜🎜🎜방금 생성된 NewsList 구성 요소를 App.vue에 도입하세요. 🎜rrreee🎜🎜🎜5단계: Firebase Cloud Firestore 데이터베이스 만들기🎜🎜🎜Firebase 콘솔에서 Cloud Firestore를 엽니다. 🎜🎜뉴스레터 데이터를 저장하려면 news라는 컬렉션을 만드세요. 🎜🎜🎜컬렉션에 문서를 생성하고 다음 필드를 추가합니다. 🎜

title

content

timestamp

🎜🎜🎜이 시점에서 뉴스레터 애플리케이션 구축 프로세스가 완료되었습니다. 이제 다음 명령을 실행하여 애플리케이션을 시작하고 localhost:8080을 방문하여 애플리케이션 효과를 확인할 수 있습니다. 🎜rrreee🎜이 기사에서는 간단한 뉴스레터 애플리케이션 작성에 대해서만 다룹니다. 필요에 따라 애플리케이션을 확장하고 최적화할 수 있습니다. 이 글의 안내를 통해 Vue와 Firebase Cloud Firestore를 성공적으로 시작하고 실용적인 뉴스레터 애플리케이션을 빠르게 개발할 수 있기를 바랍니다. 🎜🎜키워드: Vue, Firebase, Cloud Firestore, 뉴스레터, 초보자 가이드🎜

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