Tworzenie aplikacji Vue ​

Instancja aplikacji ​

Każda aplikacja Vue zaczyna się od utworzenia nowej instancji aplikacji za pomocą funkcji createApp:

import { createApp } from 'vue'

const app = createApp({
  /* opcje komponentu głównego */
})

Komponent główny ​

Obiekt, który przekazujemy do createApp, jest w rzeczywistości komponentem. Każda aplikacja wymaga „komponentu głównego (root component)”, który może zawierać inne komponenty jako swoje elementy podrzędne.

Jeśli używasz komponentów pojedynczego pliku (Single-File Components), zazwyczaj importujemy komponent główny z innego pliku:

import { createApp } from 'vue'
// importowanie komponentu głównego App z pliku pojedynczego komponentu
import App from './App.vue'

const app = createApp(App)

Chociaż wiele przykładów w tym przewodniku wymaga tylko jednego komponentu, większość rzeczywistych aplikacji jest zorganizowana w drzewo zagnieżdżonych, komponentów wielokrotnego użytku. Na przykład drzewo komponentów aplikacji Todo może wyglądać tak:

App (komponent główny)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

W kolejnych sekcjach przewodnika omówimy, jak definiować i komponować wiele komponentów razem. Zanim jednak to zrobimy, skupimy się na tym, co dzieje się wewnątrz pojedynczego komponentu.

Montowanie aplikacji ​

Instancja aplikacji nie wyrenderuje niczego, dopóki nie zostanie wywołana jej metoda .mount(). Oczekuje ona argumentu „container”, którym może być rzeczywisty element DOM lub selektor:

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

app.mount('#app')

Zawartość komponentu głównego aplikacji zostanie wyrenderowana wewnątrz elementu kontenera. Sam element kontenera nie jest uważany za część aplikacji.

Metoda .mount() powinna być zawsze wywoływana po zakończeniu wszystkich konfiguracji aplikacji i rejestracji zasobów. Warto zauważyć, że zwracana wartość, w przeciwieństwie do metod rejestracji zasobów, to instancja komponentu głównego, a nie instancja aplikacji.

Szablon komponentu głównego w DOM ​

Szablon dla komponentu głównego jest zazwyczaj częścią samego komponentu, ale można go również dostarczyć osobno, wpisując go bezpośrednio w kontener montowania:

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

import { createApp } from 'vue'

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

app.mount('#app')

Vue automatycznie użyje innerHTML kontenera jako szablonu, jeśli komponent główny nie ma już opcji template.

Szablony w DOM są często używane w aplikacjach, które korzystają z Vue bez etapu kompilacji. Mogą być również używane w połączeniu z frameworkami po stronie serwera, gdzie główny szablon może być dynamicznie generowany przez serwer.

Konfiguracja aplikacji ​

Instancja aplikacji udostępnia obiekt .config, który pozwala konfigurować kilka opcji na poziomie aplikacji, na przykład definiowanie globalnego handlera błędów:

app.config.errorHandler = (err) => {
  /* obsługa błędu */
}

Instancja aplikacji oferuje także kilka metod do rejestrowania zasobów na poziomie aplikacji. Na przykład rejestrowanie komponentu:

app.component('TodoDeleteButton', TodoDeleteButton)

To sprawia, że TodoDeleteButton jest dostępny do użycia w całej aplikacji. Omówimy rejestrację komponentów i innych typów zasobów w kolejnych sekcjach przewodnika. Możesz również przejrzeć pełną listę interfejsów API instancji aplikacji w jej dokumentacji API.

Upewnij się, że zastosowałeś wszystkie konfiguracje aplikacji przed jej zamontowaniem!

Wiele instancji aplikacji ​

Nie jesteś ograniczony do jednej instancji aplikacji na stronie. API createApp pozwala na współistnienie wielu aplikacji Vue na tej samej stronie, każda z własnym zakresem konfiguracji i zasobów globalnych:

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

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

Jeśli używasz Vue do wzbogacenia HTML renderowanego po stronie serwera i potrzebujesz Vue tylko do kontrolowania określonych części dużej strony, unikaj montowania jednej instancji Vue na całej stronie. Zamiast tego utwórz wiele małych instancji aplikacji i zamontuj je na elementach, za które są odpowiedzialne.