Создание Vue приложения ​

Экземпляр приложения ​

Создание любого приложения Vue начинается с создания нового экземпляра приложения с помощью функции createApp:

import { createApp } from 'vue'

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

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

Опции, передаваемые в createApp, по сути являются опциями компонента. Каждое приложение требует наличия «корневого компонента», который может содержать другие компоненты в качестве своих дочерних элементов.

При использовании однофайловых компонентов, обычно корневой компонент импортируется из другого файла:

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

const app = createApp(App)

Хотя во многих примерах в руководстве и необходим лишь один компонент, большинство реальных приложений организованы в виде дерева вложенных, многократно переиспользуемых компонентов. Например, дерево компонентов приложения todo-списка может быть таким:

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

Подробнее как определять и компоновать несколько компонентов вместе разберём в последующих разделах руководства. До этого сосредоточимся на том, что происходит внутри одного компонента.

Монтирование приложения ​

Экземпляр приложения не будет ничего отрисовывать, пока не вызвать его метод .mount(). Он ожидает передачи «контейнера» аргументом, который может быть либо DOM-элементом, либо строкой селектора:

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

app.mount('#app')

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

Метод .mount() следует всегда вызывать после выполнения всех конфигураций приложения и регистрации необходимых ресурсов. Также обратите внимание, что в отличие от методов регистрации ресурсов его возвращаемым значением будет экземпляр корневого компонента, а не экземпляр приложения.

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

При использовании Vue без этапа сборки, можно указать шаблон корневого компонента непосредственно внутри контейнера монтирования:

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

Убедитесь, что все конфигурации приложения применяются до его монтирования!

Несколько экземпляров приложений ​

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

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

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

Если Vue используется для улучшения отрисованного на сервере HTML и нужно, чтобы Vue управлял только определёнными частями страницы, избегайте создания одного экземпляра приложения Vue на всю страницу. Вместо этого лучше создать несколько небольших экземпляров приложения и установить их на те элементы, за которые они отвечают.