Что означает app.mount('#app');
app.mount('#app') — это момент, когда Vue реально запускается и начинает рисовать интерфейс.
Что именно означает
app.mount('#app')
Vue говорит:
«Найди элемент с id
appв HTML
и вставь туда корневой Vue-компонент»
Откуда берётся #app
В index.html:
<body>
<div id="app"></div>
</body>
#app — это обычный CSS-селектор.
Что происходит при mount
1️⃣ Vue находит <div id="app">
2️⃣ Создаёт экземпляр приложения
3️⃣ Рендерит App.vue
4️⃣ Подключает реактивность
5️⃣ Запускает жизненный цикл компонентов
После этого:
-
начинают работать компоненты
-
выполняется
setup(),mounted() -
появляется UI
До mount
const app = createApp(App)
На этом этапе:
-
приложение ещё не в DOM
-
можно:
-
подключать плагины
-
регистрировать глобальные компоненты
-
настраивать store / router
-
app.use(router)
app.use(pinia)
После mount
❌ Нельзя:
-
подключать плагины
-
менять конфигурацию приложения
app.mount('#app')
// app.use(router) ❌ уже поздно
Если #app не найден
Vue выдаст ошибку:
Failed to mount app: mount target selector "#app" returned null
Аналогия 🧠
-
createApp— собрать мебель -
use(...)— прикрутить детали -
mount('#app')— поставить её в комнату
Коротко
app.mount('#app')
👉 привязывает Vue-приложение к DOM