Instalace Vue.js a první kroky

Pár poznámek ke kompatibilitě:

Vue.js nepodporuje Internet Explorer 8 a starší, protože používá tzv. ECMAScript 5 a jeho funkce, které usnadňují syntaxi a přidávají nové možnosti. Aktuální podporu můžete kdykoli ověřit na přehledu podpory ECMAScript 5 kompatibilních prohlížečů.

Informace o aktuálně nejnovější verzi Vue.js a dalších novinkách ve verzích najdete na GitHubu.

Možnosti instalace

Existuje několik způsobů, jak Vue začít používat.

Pokud potřebujete Vue jen rychle vložit do stránky a nic neřešit, doporučuji použít přímé linknutí CDN scriptu. Pro produkční použití a robustní aplikace je lepší celý framework stáhnout lokálně a zkompilovat s ostatním javascriptem.

Instalace přes CDN server

Pro prototypování, výuku a základní použití můžete vložit vždy nejnovější verzi Vue následujícím řádkem:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Pro produkční použití doporučuji zafixovat konkrétní verzi v URL, aby se aplikace v budoucnu nerozbila vydáním nové verze (příklad fixuje verzi 2.6.0):

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

Pokud používáte nativní ES Moduly, je možné vložit také kompatibilní build:

<script type="module">
    import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

Pokud používáte NPM, podívejte se přímo na NPM Vue balíček.

Pozor:

Před použitím jakékoli verze Vue si dobře prostudujte rozdíly mezi verzemi a jak Vue řeší build. Na veřejně dostupných stránkách používejte vždy produkční verzi Vue, která je stabilní a datově úspornější. Nahraďte vue.js za vue.min.js, jde o malý script uzpůsobený pro produkční nasazení.

Lokální instalace

Jednoduše si stáhněte verzi podle toho, pro jaké prostředí ji chcete použít:

  • Vývojové prostředí (development), zobrazuje pokročilé chybová hlášení, varování a debug režim pro ladění chyb.
  • Produkční prostředí (production) pro nasazení na veřejně dostupný web, chybová hlášení jsou omezena, velmi zkomprimováno (33.30KB min+gzip)

Stažený script pak můžete přímo použít v <script> tagu v HTML stránce.

Pozor:

Nikdy nepoužítejte minifikovanou verzi pro lokální vývoj. Přijdete tím o možnost zjistit, která část frameworku způsobila chybu a co se přesně stalo.

NPM - správce balíků a závislostí

Podobně jako ve světe PHP existuje správce balíků Composer, tak na frontendu existuje NPM.

NPM je doporučená metoda, jak Vue nainstalovat.

V Terminálu jednoduše zavolejte příkaz:

# latest stable
$ npm install vue

Vue CLI

Vue nativně podporuje tzv. Single Page aplikace, což je moderní workflow a sbírka postupů, jak vyvíjet webové stránky a aplikace. Pro nasazení stačí jen pár minut a můžete jednoduše spravovat celou aplikaci pouze ve Vue a neřešit další frameworky a technologie. Vue CLI představuje způsob, jak obsluhovat webovou aplikaci psanou ve Vue z webového serveru.

Vue CLI předpokládá, že máte znalosti ohledně instalace a použití Node.js a přímo související technologie. Nejde o téma určené začátečníkům. Pokud s Vue začínáte nebo obecně s frontendem, doporučuji nejprve projít celý tento web, naučit se používat Vue v lokální webové stránce a až poté řešit serverové záležitosti, na které je potřeba mít hodně dalších znalostí.

Podrobnosti jsou na GitHubu.

Vysvětlení různých typů buildů

V adresáři dist/ v NPM balíku najdete mnoho různých verzí Vue.js. Zde je rychlý přehled:

- UMD CommonJS ES Modul (pro buildery) ES Modul (pro prohlížeče)
Full vue.js vue.common.js vue.esm.js vue.esm.browser.js
Runtime-only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
Full (produkční) vue.min.js - - vue.esm.browser.min.js
Runtime-only (produkční) vue.runtime.min.js - - -

Termíny:

  • Full: Build, který obsahuje jak kompilátor, tak běhové prostředí
  • Compiler nebo Kompilátor: Kód, který je zodpovědný za kompilaci řetězců šablon do renderovacích funkcí JavaScriptu.
  • Runtime: Kód, který vyrábí instanci Vue, renderuje a upravuje virtuální DOM webové stránky a podobně. V podstatě jde o všechno kromě kompilátoru.
  • UMD: Build, který lze použít přímo v prohlížeči prostřednictvím <script> tagu. Ve výchozím nastavení jde o soubor dostupný přes CDN server (Runtime + Kompilátor (vue.js)).
  • CommonJS: Je určen pro použití se staršími balíčky, jako je například browserify nebo webpack 1. Výchozí soubor pro tyto balíčky (pkg.main) je pouze typu Runtime (vue.runtime.common.js).

Vždy aktuální Dev Build

Pokud si chcete vyzkoušet vždy aktuální verzi Vue ještě před vydáním oficiální verze, můžete si naklonovat master větev z GitHubu a pokusit se aplikaci rozjet. Použití je trochu náročnější.

Pozor: Tímto postupem získáte vždy aktuální master z Git repositáře. Pokud chcete použít aktuální stabilní verze, tento postup nelze použít.

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Vue.js je dostupné také pro Bower:

# latest stable
$ bower install vue
Hlavní stránka
{{ menuItem.label }}