Создание модульного веб-приложения VueJS + Firestore

Вы можете найти пару примеров в Интернете, когда собираетесь создать свое первое приложение VueJS + Firestore, но это немного сложнее, когда вы хотите разбить его на модули. Без видимой причины.

Начиная

Но подождите, что такое Firestore?

Cloud Firestore - это база данных документов NoSQL, созданная для автоматического масштабирования, высокой производительности и простоты разработки приложений. Хотя интерфейс Cloud Firestore имеет многие из тех же функций, что и традиционные базы данных, как и база данных NoSQL, он отличается от них тем, как описывает отношения между объектами данных.

А VueJS?

Vue (произносится как / vjuː /, как вид) - это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других монолитных фреймворков, Vue разработан с нуля для постепенного внедрения. Основная библиотека ориентирована только на слой представления, и ее легко выбрать и интегрировать с другими библиотеками или существующими проектами. С другой стороны, Vue также отлично поддерживает сложные одностраничные приложения при использовании в сочетании с современными инструментами и вспомогательными библиотеками.

А теперь, поскольку мои намерения не годятся, и я хочу помочь вам на вашем пути стать мастером модульных приложений, позвольте игре начаться.

Настройка

Во-первых, я предполагаю, что у вас есть nodejs и npm в вашей среде разработки, если вы еще не установили их, ПОЖАЛУЙСТА, ИДТИ И СДЕЛАЙТЕ ЭТО ПРЯМО СЕЙЧАС.

Давайте установим Vue CLI.

npm install -g vue-cli

Затем перейдите в свою рабочую область и запустите команду для создания приложения. Я назову свой проект firebase-app

vue create firebase-app

Давайте сменим ваш активный каталог на папку вашего проекта и установим эти модули узлов.

cd firebase-app
npm install --save firebase vue-firestore

Дополнительную информацию о vue-firestore можно найти в репозитории gdg-tangier: https://github.com/gdg-tangier/vue-firestore

Давайте создадим папку с именем api, здесь мы и собираемся творить чудеса.

mkdir api

Это то, что у меня есть

firebase-app
|
|   .gitignore
|   package-lock.json
|   package.json
+---api
+---public
|       favicon.ico
|       index.html
\---src
    |   App.vue
    |   main.js
    +---assets
    |       logo.png
    \---components
            HelloWorld.vue

Давайте создадим два файла внутри / api

Один называется config.js.

И еще один под названием index.js

Теперь у нас настроены как firestore, так и firebase auth.

Давайте добавим две новые строки в main.js

Готов идти! Теперь все, что нам нужно сделать, это импортировать наш / api в любой компонент, который мы хотим, например, я буду использовать наш HelloWorld.vue внутри тегов ‹script›.

Затем мы собираемся протестировать нашу новую интеграцию с помощью сценария обслуживания.

npm run serve

И вуаля! Готовы создавать замечательные и модульные приложения для пожарных хранилищ.

Спасибо за чтение!