Vue 2 + Firebase: Jak vytvořit aplikaci Vue s autentizačním systémem Firebase za 15 minut

V tomto tutoriálu uvidíme, jak rychle vytvořit webovou aplikaci s autentizačním systémem pomocí Vue 2, vue-router a Firebase.

10/11/2018: Právě jsem aktualizoval tento tutoriál, aby mohl být použit s úžasnou verzí Vue Cli 3 a nejnovější verzí Vue. Všechny zdroje předchozí verze jsou stále k dispozici v úložišti Github (github.com/CaptainYouz/vue-firebase-tutorial) před značkou ‘update-vue-cli`.

Co je Vue.js?

Zde je přehled této úžasné a lehké struktury javascript:

Vue (prohlásil / vjuː /, jako pohled) je progresivní rámec pro vytváření uživatelských rozhraní. Na rozdíl od jiných monolitických struktur je Vue navržen od základů tak, aby byl postupně přijímatelný. Základní knihovna je zaměřena pouze na vrstvu zobrazení a je velmi snadné ji vyzvednout a integrovat s jinými knihovnami nebo stávajícími projekty
z oficiální dokumentace vuejs: https://vuejs.org/v2/guide

Proč Vue.js?

Vue.js je velmi snadno použitelný, výkonný a dobře zdokumentovaný. Ve věku nových javascriptových rámců, které jsou řízeny komponentami, vyniká Vue svou jednoduchostí a výkonem. Ekosystém je živý a stále více lidí přechází na Vue každý den.

Pokud se chcete podrobněji seznámit s tím, proč byste měli používat Vue.js, můžete zkontrolovat toto srovnání s jiným frameworkem javascript: https://vuejs.org/v2/guide/comparison.html

Co je Firebase?

Firebase je platforma pro vývoj mobilních a webových aplikací. Firebase se skládá z doplňkových funkcí, které mohou vývojáři kombinovat podle svých potřeb. [...] Počáteční produkt Firebase byl databáze v reálném čase, která poskytuje API, které vývojářům umožňuje ukládat a synchronizovat data mezi více klienty. Postupem času rozšířila svou produktovou řadu, aby se stala kompletní sadou pro vývoj aplikací.
z wikipedie: https://en.wikipedia.org/wiki/Firebase

V krátkosti, Firebase je sada nástrojů, která vám umožní vyvinout aplikaci bez programování na straně serveru. Má databázi v reálném čase, autentizační systém, hlášení chyb, analytické a další služby připravené k použití ve vaší mobilní / webové aplikaci. Tímto způsobem se můžete zaměřit na vaši aplikaci a uživatele.

Proč Firebase?

U aplikací s minimálními potřebami typu back-end, jako je ověřování nebo ukládání databáze, není třeba znovu vynalézat kolo, Firebase to udělá za vás a poskytuje mnohem více nástrojů. Také se nemusíte obtěžovat škálováním, výkonem serveru a velikostí databáze, Firebase měří vše automaticky.

Začněme !

Nejprve se chystáme inicializovat nový projekt Vue pomocí skvělého nástroje Vue Cli 3 (https://github.com/vuejs/vue-cli).

Pokud ještě nemáte nainstalován, nainstalujte jej:

$ npm install -g @ vue / cli

Nyní, když máte nainstalován vue cli, vytvořme nový projekt. V dokumentaci vue cli se uvádí:

Používání
$ vue create 

Jednou z skvělých funkcí Vue Cli 3 je to, že můžete svůj projekt inicializovat s nulovou konfigurací, takže můžete začít kódovat co nejrychleji.

Vytvořme náš nový projekt Vue a nazveme jej „vue-firebase-tutorial“.

$ vue create vue-firebase-tutorial
vue create vue-firebase-tutorial

Budete vyzváni k výběru předvolby. Můžete si vybrat výchozí předvolbu, která je dodávána se základním nastavením Babel + ESLint, nebo vybrat „Ručně vybrat funkce“ a vybrat požadované funkce.

V našem případě vybereme možnost „Ručně vybrat funkce“ a vybereme možnost vue-router, protože ji budeme během tohoto tutoriálu používat. Pokud jde o další funkce, udělejte, co chcete, protože na zbytek tutoriálu to nebude opravdu důležité.

zvolte možnost „Směrovač“

Na konci budete dotázáni, zda chcete uložit tuto předvolbu pro budoucí projekty a poté bude váš projekt inicializován.

Poté zadejte nový adresář vue-firebase-tutorial a spusťte npm run serve

Výukový program $ cd vue-firebase-tutorial
$ npm běh sloužit

Pokud nyní otevřete webovou adresu „http: // localhost: 8080“, měli byste mít výchozí zobrazení našeho projektu Vue!

výchozí pohled z nového projektu Vue

Struktura aplikace

Podívejme se rychle na strukturu aplikace.

struktura aplikace

Pro tento tutoriál stačí vědět, že náš zdrojový kód bude v adresáři src /.

Ostatní soubory jsou většinou konfigurační soubory generované aplikací Vue Cli 3. Pokud chcete mít úplný přehled o struktuře, můžete zkontrolovat dokumentaci Vue Cli 3.

Před dalším pokračováním v tomto tutoriálu, pokud již neznáte strukturu souboru Vue (jako src / components / HelloWorld.vue), doporučuji vám podívat se na toto: https://vuejs.org /v2/guide/single-file-components.html

PÍSEMNĚ NĚKTERÝ KÓD!

Naše budoucí architektura aplikací

Naše aplikace se bude skládat ze tří zobrazení, dvou (zobrazení přihlášení a zobrazení registrace), ke kterým můžeme přistupovat pouze bez ověření, a jednoho (zobrazení Home), ke kterému budeme mít přístup pouze s ověřením.

architektura aplikace

Po úspěšném přihlášení nebo po vytvoření nového účtu budeme přesměrováni na ověřenou část aplikace, domovské zobrazení.

Krok 1: Přihlášení a přihlášení

1–1 Zobrazení přihlášení

Vytvoříme zobrazení Přihlášení. Za tímto účelem vytvoříme novou součást Vue s názvem Přihlášení pod src / views

V tuto chvíli bude složka jednoduše obsahovat nadpis, dvě vstupní pole, tlačítko a malou větu v html.

Přihlašovací komponenta.`src / views / Login.vue`

Naše komponenta je nyní vytvořena! Ale jak zobrazit tuto novou součást v naší aplikaci? Pro tento účel použijeme vue-router. Pamatovat? Nainstalovali jsme ji, když jsme inicializovali aplikaci pomocí vue-cli.

Co je vue-router?

vue-router je oficiální router pro Vue.js. Hluboko se integruje s jádrem Vue.js, díky čemuž je vytváření jednostránkových aplikací s Vue.js hračkou.
Vytvoření jednostránkové aplikace pomocí Vue.js + vue-router je mrtvé jednoduché. S Vue.js již komponujeme naši aplikaci s komponenty. Při přidávání vue-routeru do mixu vše, co musíme udělat, je zmapovat naše komponenty na trasy a dát vue-routeru vědět, kde je vykreslit.
z dokumentace vue-router: https://github.com/vuejs/vue-route

Přidejme tedy naši novou součást přihlášení, kterou jsme právě vytvořili, do našeho směrovače aplikací. Otevřete soubor src / router.js a přidejte komponentu Login do routeru takto:

src / router.js

Pokud změníte adresu URL vašeho prohlížeče na localhost: 8080 / # / login, měla by se v prohlížeči zobrazit nová komponenta Přihlášení, kterou jsme právě vytvořili:

http: // localhost: 8080 / # / login

Proč stále máme výchozí nabídku, přestože jsme ji do html šablony komponenty Přihlášení nezadali? Pokud otevřete soubor App.vue, je šablona komponenty aplikace následující:

html šablona komponenty aplikace

Komponenta aplikace je hlavní komponentou aplikace a bude první, která bude vykreslena. Obsahuje div se dvěma prvky propojení routeru a komponentou html s názvem router-view.

Brzy budeme hovořit o prvku router-link, ale nejprve se podívejme, co je to prvek router-view.

Router-view je součástí vue-routeru:

Komponenta  je funkční komponenta, která vykreslí odpovídající komponentu pro danou cestu. Komponenty vykreslené v  mohou také obsahovat vlastní , které vykreslí komponenty pro vnořené cesty.
z dokumentace vue-router https://router.vuejs.org/en/api/router-view.html

Takže při dosažení http: // localhost: 8080 / # / login vue-router vykreslí připojenou součást cesty / přihlášení, kterou jsme definovali v src / router.js, uvnitř komponenty view-view routeru. A protože součást App také obsahuje nav div s dvěma prvky router-link ve své šabloně, také je necháme zobrazit v našem pohledu.

Abychom se vyhnuli záměně s navigací aplikace, kterou vytváříme, odeberte tuto divizi div z komponenty App a nahraďte ji logem vue. Logo Vue již máme uvnitř adresáře src / asset /, takže ho používejte!

Komponenta aplikace v `src / App.vue`

Také, protože nebudeme používat zobrazení About, můžeme soubor odstranit z našeho adresáře (src / views / About.vue) a také odstranit i t z naší konfigurace tras v src / router.js

src / router.js

Nyní se vraťme do našeho přihlašovacího zobrazení a přidejte do naší přihlašovací komponenty nějaký styl. Do elementu