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.
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.
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/[email protected]"></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/[email protected]/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
zavue.min.js
, jde o malý script uzpůsobený pro produkční nasazení.
Jednoduše si stáhněte verzi podle toho, pro jaké prostředí ji chcete použít:
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.
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 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í.
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
).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
Vue.js je dostupné také pro Bower:
# latest stable
$ bower install vue