První kroky
Vítejte u Vue tutoriálu!
Úkolem tohoto tutoriálu je rychle vám zprostředkovat, jaké je to pracovat s Vue přímo v prohlížeči. Nesnaží se být obsáhlý a nemusíte předem rozumět všemu. Jakmile ho však dokončíte, určitě si přečtěte také Průvodce, který každé téma pokrývá více do hloubky.
Předpoklady
Tutoriál předpokládá základní znalost HTML, CSS a JavaScriptu. Pokud je pro vás vývoj frontendu úplnou novinkou, není možná nejlepší nápad vrhnout se jako první rovnou na framework. Raději se napřed trochu seznamte se základy a teprve poté se vraťte zpět! Předchozí zkušenost s jinými frameworky pomůže, ale není nezbytná.
Jak používat tento tutoriál
Můžete editovat kód napravoníže a okamžitě uvidíte výsledek změny. Každý krok představí jednu základní funkcionalitu Vue a od vás se očekává, že doplníte kód, aby demo začalo fungovat. Pokud se zaseknete, bude k dispozici tlačítko „Ukázat řešení“, které pro vás výsledný kód odkryje. Pokuste se na něj příliš nespoléhat – budete se učit rychleji tím, že na to přijdete sami.
Pokud jste zkušený vývojář přecházející z Vue 2 nebo jiných frameworků, je zde několik nastavení, které můžete naladit tak, aby vám tento tutoriál byl co nejvíc užitečný. Pokud jste začátečník, doporučujeme pokračovat s výchozím nastavením.
Detaily možného nastavení
-
Vue nabízí dva API styly: Options API a Composition API. Tento tutoriál jen navržen pro práci s oběma – můžete si vybrat preferovaný styl pomocí přepínače API preference vlevo nahoře. Zjistit víc o API stylech.
-
Můžete také přepínat mezi SFC-módem a HTML-módem. První z nich zobrazí příklady kódu ve formátu Single-File komponenty (SFC), který používá většina vývojářů, pokud pracují s Vue s build fází. HTML-mód ukazuje použití bez build fáze.
TIP
Pokud ve vašich aplikacích chcete používat HTML-mód bez build fáze, ujistěte se, že buďto uvnitř vašich skriptů změníte importy na:
import { ... } from 'vue/dist/vue.esm-bundler.js'
nebo nastavíte build tool, aby odpovídajícím způsobem vyhodnocoval import z vue
. Ukázková konfigurace pro Vite je zde:
// vite.config.js
export default {
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js'
}
}
}
Pro více informací se podívejte se na příslušnou sekci v průvodci o Nástrojích.
Připraveni? Klikněte na „Další“ pro zahájení výuky.