Создание экземпляра приложения

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

import { createApp } from 'vue'

const app = createApp({
  /* параметры */
})

Импортируем Vue.js.
Создаём экземпляр приложения — далее будем называть его просто «приложением».

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

Для работы приложения необходим корневой компонент — тот, с которого начинается иерархия вложенных компонентов. Допустим, он находится в src/App.vue. Для начала импортируем его из @/App.vue.

import App from '@/App.vue'

Чтобы приложение строило дерево компонентов именно от корневого, нужно передать его в качестве аргумента функции createApp.

const app = createApp(App)

Далее необходимо связать DOM-элемент с Vue-приложением. Для этого вызываем метод mount и передаём ему селектор нужного элемента. К примеру, чтобы «примонтировать» приложение к <div id="app"></div>, нужно передать строку #app:

import { createApp } from 'vue'
import App from '@/App'

const app = createApp(App)
app.mount('#app')

Скрипт main.js должен быть подключён к файлу index.html, расположенному в корне проекта.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Мой проект</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Создание экземпляра приложения

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

Проверьте себя