Просто изящный маленький трюк для создания экрана загрузки, чтобы ваши пользователи знали, что ваше приложение все еще работает, даже если для начальной загрузки требуется время.
Идея состоит в том, чтобы добавить экран загрузки / заставки в .public/index.html файл внутри <div id="app"></div> или в другую точку монтирования, потому что vue удалит все, что находится внутри, когда завершит загрузку компонентов.
Я только что создал новое приложение vue из интерфейса командной строки.
Чтобы имитировать медленный рендеринг, я поместил функцию задержки в HelloWorld.vue, которая вызывается внутри beforeMount()
В добавленном мной .public/index.html файле;
который представляет собой простой CSS анимации.
Внутри <div id="app"></div> я добавил следующее:
Вы можете найти полный проект на моем гитхабе.
Особая благодарность https://codepen.io/luka-butina/ за экран загрузки.
Первоначально опубликовано на сайте visualbean.io 28 декабря 2018 г.
