Vue.js Firestore 예 - Firebase Cloud Firestore를 사용한 Vue.js CRUD 서버리스

https://ozenero.com/vue-js-firestore-example-vue-js-crud-serverless-with-firebase-cloud-firestore

Vue.js Firestore 예 - Firebase Cloud Firestore를 사용한 Vue.js CRUD 서버리스

Cloud Firestore는 클라우드에 데이터를 저장하는 데 도움이 됩니다. 오프라인 모드를 지원하므로 기기가 인터넷에 연결되어 있는지 여부에 관계없이 앱이 제대로 작동(데이터 쓰기, 읽기, 듣기 및 쿼리)하고 자동으로 데이터베이스에서 Firebase 서버로 변경 사항을 가져옵니다. 쿼리 및 가져오기 기능을 개선하는 방식으로 데이터를 구조화할 수 있습니다. 이 튜토리얼은 Firebase Firestore CRUD 작업을 수행할 수 있는 Vue.js 앱을 보여줍니다.

관련 게시물: Vue.js CRUD example – a simple Note App

Vue.js Firestore 예제 개요

목표

Vue 앱은 새 메모를 작성하는 데 도움이 되며 메모 목록을 표시하고 각 메모 페이지(제목 및 내용 포함)를 쉽게 수정할 수 있습니다. 이 앱은 오프라인 모드도 지원합니다. 인터넷 연결 없이 노트를 생성/업데이트/삭제할 수 있습니다.



물론 이 앱은 백엔드 인프라로 Firebase Firestore와 상호 작용합니다.

데모

프로젝트 구조

3가지 구성 요소가 있습니다.

App.vue 다른 모든 구성 요소를 보유합니다.

NotesList.vue + 메모 버튼이 있는 목록의 모든 메모를 포함합니다.

Note.vue 목록에 단일 메모를 표시하여 새 메모를 만들거나 현재 메모를 편집할 수 있습니다.

기술

뷰 CLI 3.0.1

뷰 2.5.17

자바스크립트 5.4.2용 Firebase SDK

관행

Vue 프로젝트 설정

vue-cli 설치

어디서나 Vue CLI를 사용하려면 다음 명령을 실행하십시오.npm install -g vue-cli

프로젝트 초기화

프로젝트 폴더를 저장하려는 폴더를 cmd로 지정하고 다음 명령을 실행합니다.npm create vue-note-app

2가지 옵션이 표시되며 기본값을 선택합니다.

Firebase SDK 설치

실행 명령: npm install firebase프로세스가 완료되면 package.json에서 firebase를 볼 수 있습니다.

"dependencies": {
  "firebase": "^5.4.2",
  "vue": "^2.5.17"
},

더 보기:

https://ozenero.com/vue-js-firestore-example-vue-js-crud-serverless-with-firebase-cloud-firestore