Skip to content

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:

js
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:

js
// 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.

App.vue
Show Error
Auto Save
Tutoriál has loaded