Vue.js 2 tipy a řešení

Používám Vue.js (aktuálně verzi 2.6) teprve pár měsíců, jsem nováček od léta 2019. Pro začátek si zde budu přidávat důležité zdroje pro učení a pochopení Vue. Proč Vue.js ? Umí pracovat s moderním Javascriptem (ES6 alias ES2015 např. arrow functions, template literals, modules). Webpack se mi postará o funkční kód.

Proč Vue.js

Vytvářet web s pomocí Vue.js je jako skládat stavebnici Lego. Je to rychlé, snadné a zábavné. Komponenty mezi sebou mohou komunikovat, předávat si data nebo je možné data ukládat do store (Vuex) a přistupovat k nim z libovolné komponenty přes gettery a actions.

Vue.js má defaultně ochranu proti XSS narozdíl třeba od jQuery (prepend, append, html…).

Vue.js umí pracovat s webem jako jednou stránkou a při přecházení nepotřebuje načítat znovu celý html kód (SPA).

Vue.js narozdíl od jQuery nepracuje přímo s DOM, ale díky virtuálnímu DOMU (a rychlé synchronizaci s DOM) se nestane, že by jedna syntax error vyřadila z provozu Javascript na stránce (např. přestane fungovat poptávkový formulář, našeptávač, reklamní systém, nějaký widget apod.)

Vue.js řeší SEO a routování (Vue router) URL a rychlé přepínání mezi URL s možností transition efektů.

Vue video kurzy a tutoriály

Vue.js Guide – oficiální příručka

The Vue Tutorial for 2018 – Learn Vue 2 in 65 Minutes

The Vue Instance – zdarma kurz na vuemastery.com

Vue JS 2 – The Complete Guide – kurz na Udemy za peníze

Vue Essentials – Cheat sheet – seznam triků

Vytvoření projektu Vue.js + PHP

Na vytvoření velkého projektu budu potřebovat kvalitní adresářovou strukturu, abych měl kód snadno upravitelný a znovupoužitelný. Budu se snažit rozdělovat kód na jednotlivé komponenty. Frontend projektu bude ve Vue.js, na backend použiju PHP (Zend Framework 3).

Jako router se nabízí plugin Vue-router (routy budou definované v souboru routes/routes.js). Router bude rozdělovat práci komponentám na základě URL (budu chtít URL s lomítkem na konci, i to se dá).

Na správu dat a stavu se hodí plugin Vuex. Data budu chtít ukládat do adresáře /store, kde bude store.js. Ve store.js budu chtít používat moduly z adresáře /store/modules.

Příprava nástrojů pro vývoj

Na vytváření projektu lze použít vue-cli (instalace: npm install -g @vue/cli)

V mém případě verze @vue/cli@3.11.0 (14.9.2019)

Založení projektu Vue a instalace potřebných pluginů

  1. vue create nazev-projektu
  2. npm install vue-router –save
  3. Bootstrap 4 (instalace: npm install vue bootstrap-vue bootstrap)
  4. Font Awesome 5 instalace:
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

Facebook atd.
npm i --save @fortawesome/free-brands-svg-icons

5. Google login button (npm install vue-google-signin-button)

Add Comment

Required fields are marked *. Your email address will not be published.


devět + 6 =