Создание приложения
Существует несколько вариантов создания
Каждое приложение Vue начинается с создания нового экземпляра приложения с помощью createApp функции:
createApp на самом деле является компонентом. Каждому приложению требуется «корневой компонент», который может содержать другие компоненты в качестве дочерних.
Если вы используете однофайловые компоненты, мы обычно импортируем корневой компонент из другого файла:
Дерево компонентов приложения Todo может выглядеть так:
Установка приложения
Монтирование вашего приложения (кода) на страницу (html)
Экземпляр приложения ничего не будет отображать, пока app.mount() не 'замаунтит' приложение на страницу. Он ожидает аргумент «контейнер», который может быть либо реальным элементом DOM, либо строкой селектора:
Важно
Содержимое корневого компонента приложения будет отображаться внутри элемента контейнера. Сам элемент контейнера не считается частью приложения.
метод .mount() всегда следует вызывать после завершения всех настроек приложения и регистрации активов. Также обратите внимание, что его возвращаемое значение, в отличие от методов регистрации активов, представляет собой экземпляр корневого компонента, а не экземпляр приложения.
Несколько экземпляров приложения
Зачем? ну а почему бы и нет :)
Вы не ограничены одним экземпляром приложения на одной странице. API createApp позволяет нескольким приложениям Vue сосуществовать на одной странице, каждое из которых имеет свою собственную область конфигурации и глобальные ресурсы:
Важно
Если вы используете Vue для улучшения HTML, отображаемого на сервере, и вам нужно Vue только для управления определенными частями большой страницы, избегайте установки одного экземпляра приложения Vue на всю страницу. Вместо этого создайте несколько экземпляров небольших приложений и смонтируйте их на элементах, за которые они отвечают.
Если вы хотите знать больше о Vue без этапа сборки то читайте подробнее по ссылке