Vue 2 + Firebase: Как да изградите приложение Vue със система за удостоверяване на Firebase за 15 минути

В този урок ще видим как бързо да изградите уеб приложение със система за удостоверяване с помощта на Vue 2, vue-router и Firebase.

10/11/2018: Току-що актуализирах този урок, за да може да се използва със страхотния Vue Cli 3 и най-новата версия на Vue. Всички източници на предишната версия все още са достъпни в хранилището на Github (github.com/CaptainYouz/vue-firebase-tutorial) преди тага „update-vue-cli“.

Какво е Vue.js?

Ето преглед на тази невероятна и лека JavaScript рамка:

Vue (произнася се / vjuː /, като изглед) е прогресивна рамка за изграждане на потребителски интерфейси. За разлика от други монолитни рамки, Vue е проектиран от самото начало, за да бъде поетапно възприемчив. Основната библиотека е фокусирана само върху изгледания слой и е много лесно да се вземе и интегрира с други библиотеки или съществуващи проекти
от официалната документация на vuejs: https://vuejs.org/v2/guide

Защо Vue.js?

Vue.js е много лесен за използване, мощен и добре документиран. Във възрастта на новите javascript рамки, които са задвижвани от компоненти, Vue се откроява със своята простота и изпълнение. Екосистемата е жизнена, с всеки ден повече и повече хора преминават към Vue.

Ако искате да отидете по-задълбочено защо трябва да използвате Vue.js, можете да проверите това сравнение с друга рамка на JavaScript: https://vuejs.org/v2/guide/comppare.html

Какво е Firebase?

Firebase е платформа за разработка на мобилни и уеб приложения. Firebase е съставена от допълнителни функции, които разработчиците могат да смесват и съвпадат, за да отговарят на техните нужди. [...] Първоначалният продукт на Firebase беше база данни в реално време, която предоставя API, който позволява на разработчиците да съхраняват и синхронизират данни на множество клиенти. С течение на времето тя разшири продуктовата си линия, за да се превърне в пълен набор за разработка на приложения.
от wikipedia: https://bg.wikipedia.org/wiki/Firebase

Накратко, Firebase е набор от инструменти, които ви позволяват да разработите приложение без програмиране от страна на сървъра. Разполага с база данни в реално време, система за удостоверяване, докладване за сривове, анализи и други услуги, готови за използване във вашето мобилно / уеб приложение. По този начин можете да се съсредоточите върху приложението и потребителите си.

Защо Firebase?

За приложение с минимални бек-енд нужди като автентификация или съхранение на база данни, няма нужда да измисляте отново колелото, Firebase го прави за вас и ви дава много повече инструменти. Освен това не е нужно да се занимавате с мащабиране, производителност на сървъра и размер на базата данни, Firebase мащабира всичко автоматично.

Да започваме !

Първо, ние ще инициализираме нов проект Vue, използвайки страхотния инструмент Vue Cli 3 (https://github.com/vuejs/vue-cli).

Ако все още нямате инсталиран vue cli, нека го инсталирате:

$ npm install -g @ vue / cli

Сега, когато имате инсталиран vue cli, нека създадем нов проект. Във документацията за vue cli пише:

употреба
$ vue create <име на проект>

Една от готините характеристики на Vue Cli 3 е, че можете да инициализирате вашия проект с нулева конфигурация, необходима, така че да можете да започнете да кодирате възможно най-бързо.

Нека създадем нашия нов проект Vue и да го наречем „vue-firebase-урок“.

$ vue създава vue-firebase-урок
vue създаване vue-firebase-урок

Ще бъдете подканени да изберете предварително зададена настройка. Можете или да изберете предварително зададената настройка, която се предлага с основна настройка Babel + ESLint, или да изберете „Ръчно изберете функции“, за да изберете необходимите функции.

За нашия случай ще изберем „Ръчно избиране на функции“ и ще изберем опция за vue-router, тъй като ще го използваме по време на този урок. За останалите функции направете както искате, тъй като това няма да има значение за останалата част от урока.

изберете опцията „Рутер“

В края ще бъдете попитани дали искате да запазите това предварително зададено за бъдещи проекти и след това вашият проект ще бъде инициализиран.

След това въведете новата директория vue-firebase-tutorial и стартирайте npm run serve

$ cd vue-firebase-урок
$ npm изпълнение на сервиз

Сега, ако отворите URL адреса „http: // localhost: 8080“, трябва да имате изглед по подразбиране на нашия проект Vue!

изглед по подразбиране от новия проект Vue

Структурата на приложението

Нека да разгледаме бързо структурата на приложението.

структура на приложението

За този урок, просто трябва да знаем, че изходният ни код ще бъде под src / директорията.

Останалите файлове са предимно конфигурационни файлове, генерирани от Vue Cli 3. Ако искате да имате пълен преглед на структурата, можете да проверите документацията на Vue Cli 3.

Освен това, преди да продължите по-нататък в този урок, ако вече не знаете структурата на файл Vue (като src / компоненти / HelloWorld.vue), съветвам ви да разгледате това: https://vuejs.org /v2/guide/single-file-components.html

НАПРАВЕТЕ НЯКОЙ КОД!

Нашата бъдеща архитектура на приложенията

Приложението ни ще се състои от три изгледа, два (изглед на вход и изглед за регистрация), до които можем да имаме достъп само без удостоверяване, и един (изглед в дома), до който можем да имаме достъп само с удостоверяване.

архитектура на приложенията

След като влезете успешно или след създаване на нов акаунт, ние ще бъдем пренасочени към удостоверената част от приложението, изглед Начало.

Първа стъпка: Вход и регистрация

1–1 Изгледът за влизане

Нека създадем изгледа за влизане За целта ще създадем нов компонент Vue, наречен Вход под src / views

За момента компонентът просто ще се състои от заглавие, две полета за въвеждане, бутон и малко изречение в html.

Вход компонент. `Src / views / Login.vue`

Нашият компонент вече е създаден! Но как да покажем този нов компонент в нашето приложение? Е, за това ще използваме vue-рутер. Помня? Вече го инсталирахме, когато инициализирахме приложението с vue-cli.

Какво е vue-router?

vue-router е официалният рутер за Vue.js. Той дълбоко се интегрира с Vue.js ядрото, за да направи изграждането на приложения за единични страници с Vue.js лесно.
Създаването на приложение за една страница с Vue.js + vue-router е мъртъв просто. С Vue.js вече съставяме нашето приложение с компоненти. Когато добавяте vue-router към сместа, всичко, което трябва да направим, е да картографираме компонентите си в маршрутите и да информираме vue-router къде да ги преведем.
от документацията за vue-router: https://github.com/vuejs/vue-route

Така че, нека добавим нашия нов компонент за вход, който току-що създадохме в нашия рутер за приложения. Отворете src / router.js файла и добавете компонента Login към рутера така:

SRC / router.js

След това, ако промените URL адреса на браузъра си на localhost: 8080 / # / login, трябва да видите новия компонент за вход, който току-що създадохме, показан във вашия браузър:

HTTP: // Localhost: 8080 / # / вход

Защо все още имаме менюто по подразбиране, въпреки факта, че не го поставихме в html шаблона на компонента Вход? Е, ако отворите файла App.vue, шаблонът на компонента на приложението е както следва:

html шаблон на компонента на приложението

Компонентът на приложението е основният компонент на приложението и ще бъде първият, който ще бъде представен. Той съдържа div с два елемента на рутер-връзка и html компонент, наречен router-view.

Скоро ще поговорим за елемента на връзката на рутера, но първо, нека да видим какво е елементът за изглед на рутера.

Изгледът на рутера е компонент на vue-router:

Компонентът  е функционален компонент, който прави съответстващия компонент за дадения път. Компонентите, предоставени в , могат също да съдържат свой собствен , който ще направи компоненти за вложени пътища.
от документацията за vue-router https://router.vuejs.org/en/api/router-view.html

Така че, когато достигнете http: // localhost: 8080 / # / login, vue-router ще направи прикачения компонент на пътя / вход, който сме дефинирали в src / router.js вътре в компонента за преглед на рутера. И тъй като компонентът на App също съдържа nav div с двата елемента на рутер-връзка в неговия шаблон, ние също така ги показваме в нашия изглед.

За да избегнете объркване с навигацията на приложението, което създаваме, нека премахнем този навигационен елемент от компонента на приложението и го заменете с логото на vue. Вече имаме логото на Vue вътре в src / активите / директорията, така че нека го използваме!

Компонент на приложението в

Също така, тъй като няма да използваме изгледа About, можем да премахнем файла от нашата директория (src / views / About.vue) и също да премахнем i t от конфигурацията на нашите маршрути в src / router.js

SRC / router.js

Сега, да се върнем към изгледа ни за вход, добавете малко стил към нашия компонент за вход. Вместо елемента