Створення додатку Vue ​

Екземпляр додатку ​

Кожен додаток Vue починається зі створення нового екземпляру додатку функцією createApp:

import { createApp } from 'vue'

const app = createApp({
  /* параметри кореневого компонента */
})

Кореневий компонент ​

Обʼєкт, який ми передаємо в createApp є, по суті, компонентом. Кожен додаток вимагає "кореневого компонента", який може містити інші дочірні компоненти.

Якщо ви використовуєте одно-файлові компоненти, то зазвичай ми імпортуємо кореневий компонент з іншого файлу:

import { createApp } from 'vue'
// імпортуємо кореневий компонент програми з одно-файлового компонента.
import App from './App.vue'

const app = createApp(App)

Багато прикладів в цьому гіді використовують лише один компонент, але більш реальні додатки організовані як дерево вкладених та повторно використовуваних компонентів. Наприклад, дерево компонента в додатку "Список справ" може виглядати так:

App (кореневий компонент)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

Ми пояснимо, як визначати і поєднувати кілька компонентів разом в наступних розділах гіду. Перед цим, ми сфокусуємось над тим, що відбувається всередині одниночного компонента.

Монтування програми ​

Екземпляр додатка не буде нічого рендерити, допоки метод .mount() не буде викликаний. Він очікує аргумент-контейнер, який може бути актуальним DOM елементом або рядком-селектором:

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

app.mount('#app')

Вміст кореневого компонента буде рендеритись всередині контейнера. Сам елемент-контейнер не вважається частиною додатка.

Метод .mount() завжди має викликатись після усіх налаштувань додатку, та після реєстрацій додаткових ресурсів. Варто зазначити, що він, на відміну від методів реєстрації додаткових ресурсів, повертає екземпляр кореневого компонента замість екземпляра додатка.

Шаблон кореневого компонента в DOM ​

Шаблон для кореневого компонента зазвичай є частиною самого компонента, але також можна надати шаблон окремо, написавши його безпосередньо в контейнері для монтування:

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

import { createApp } from 'vue'

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

app.mount('#app')

Vue автоматично використає innerHTML контейнера, як шаблон, якщо кореневий компонент не має параметра template.

Шаблони в DOM часто використовуються в програмах, які використовують Vue без кроку збірки. Їх також можна використовувати в поєднанні з платформами на стороні сервера, де кореневий шаблон може генеруватися сервером динамічно.

Конфігурації додатка ​

Екземпляр додатка надає доступ до обʼєкта .config, що дозволяє нам налаштувати кілька параметрів на рівні додатка, наприклад, визначити обробник помилок, який фіксує помилки з усіх дочірніх компонентів:

app.config.errorHandler = (err) => {
  /* обробка помилки */
}

Екземпляр додатка також забезпечує кілька методів для реєстрації ресурсів додатка. Наприклад, реєстрація компонента:

app.component('TodoDeleteButton', TodoDeleteButton)

Це дає можливість використовувати TodoDeleteButton будь-де у вашому додатку. Ми пояснимо, як відбувається реєстрація компонентів та інших видів ресурсів в наступних розділах гіду. Ви також можете знайти повний список АРІ екземплярів додатку в довіднику API.

Перш ніж монтувати програму, переконайтеся, що ви застосували всі налаштування програми!

Декілька екземплярів додатка ​

Ви не обмежені одним екземпляром додатку на одній сторінці. API createApp дозволяє декільком додаткам Vue співіснувати на одній сторінці, кожен з яких має свою область конфігурації та глобальних ресурсів:

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

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

Якщо Ви використовуєте Vue для покращення HTML рендерингу на стороні сервера, і потребуєте Vue лише для контролю певних частин величезної сторінки, уникайте монтування одного екземпляр додатку Vue на всій сторінці. Замість цього створіть декілька невеликих екземплярів додатку і вмонтуйте їх в елементи, за які вони відповідають.