Vytvoření Vue aplikace ​

Aplikační instance ​

Každá Vue aplikace začíná vytvořením nové Aplikační instance pomocí funkce createApp:

import { createApp } from 'vue'

const app = createApp({
  /* nastavení root kompomenty */
})

Root komponenta ​

Objekt, který posílíme do funkce createApp je ve skutečnosti komponenta. Každá aplikace potřebuje "root komponentu", která může obsahovat další komponenty a jejich potomky.

Pokud používáte Single-File komponenty (SFC), typicky importujeme kořenovou komponentu z jiného souboru:

import { createApp } from 'vue'
// import root komponenty App z single-file komponenty (SFC)
import App from './App.vue'

const app = createApp(App)

I když mnoho příkladů v tomto průvodci potřebuje pouze jedinou komponentu, většina skutečných aplikací je organizována do stromu vnořených, znovupoužitelných komponent. Strom komponent aplikace Todo může vypadat například takto:

App (root komponenta)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

V dalších částech průvodce probereme, jak definovat více komponent a skládat je dohromady. Předtím se zaměříme na to, co se děje uvnitř samostatné komponenty.

Připojení (mount) Vue aplikace ​

Aplikační instance nic nevykreslí, dokud není zavolána její funkce .mount(). Funkce jako svůj parametr očekává „kontejner“, což může být buď skutečný prvek DOM, nebo řetězec selektoru:

<div id="app"></div>

app.mount('#app')

Obsah root komponenty aplikace bude vykreslen uvnitř zadaného kontejneru. Samotný element kontejneru není považován za součást aplikace.

Funkce .mount() by měla být vždy volána po dokončení všech aplikačních konfigurací a registrací zdrojů. Všimněte si, že narozdíl od funkcí pro registraci zdrojů je její návratovou hodnotou instance root komponenty namísto aplikační instance.

In-DOM šablona root komponenty ​

Šablona root komponenty je většinou součástí komponenty samotné. Ale můžeme také poskytnout šablonu samostatně, pokud ji zapíšeme přímo do elementu určeného pro připojení komponenty (mount container):

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

Vue automaticky použije atribut innerHTML kontejneru jako šablonu, pokud root komponenta ještě nemá vlastní nastavení template.

In-DOM šablony jsou často používány v aplikacích, které používají Vue bez build fáze. Mohou být také použity ve spojení se server-side frameworky, kde může být root šablona dynamicky generována serverem.

Nastavení aplikace ​

Aplikační instance vystavuje .config objekt, jenž nám umožňuje nakonfigurovat několik globálních nastavení, například definovat globální hadler pro obsluhu chyb, který zachycuje chyby ze všech podřízených komponent:

app.config.errorHandler = (err) => {
  /* zpracovat chybu */
}

Aplikační instance také poskytuje několik funkcí pro registraci globálních zdrojů. Například registrace komponenty:

app.component('TodoDeleteButton', TodoDeleteButton)

Díky tomu je TodoDeleteButton dostupný pro použití kdekoli v naší aplikaci. Registraci komponent a dalších typů zdrojů se budeme věnovat víc v dalších částech průvodce. Můžete si také projít úplný seznam API funkcí aplikační instance v API referenci.

Ujistěte se, že jste všechny aplikační konfigurace použili před voláním funkce .mount()!

Více aplikačních instancí ​

Nejste omezeni na jednu aplikačních instanci na jedné stránce. API createApp umožňuje koexistenci více Vue aplikací na stejné stránce, z nichž každá má svůj vlastní scope pro konfiguraci a globální zdroje:

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

Pokud používáte Vue k obohacení HTML generovaného na serveru a potřebujete ho pouze k ovládání konkrétních částí velké stránky, vyhněte se připojení (mount) jediné aplikační instance Vue na celou stránku. Místo toho vytvořte několik malých aplikačních instancí a připojte je k prvkům, za které jsou zodpovědné.