Создание приложения 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 ​

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

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

Шаблоны In-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 на всю страницу. Вместо этого создайте несколько небольших экземпляров приложений и установите их на те элементы, за которые они отвечают.