Блог

Главная - Вопросы по программированию - Как создать экран предварительной загрузки / заставки в Nuxt.js перед запуском приложения?

Как создать экран предварительной загрузки / заставки в Nuxt.js перед запуском приложения?

#vue.js #nuxt.js #splash-screen #nuxtjs

#vue.js #nuxt.js #заставка #nuxtjs

Вопрос:

Я попытался добавить загрузчик, как показано на nuxt.js документация между маршрутами, но она не работает. Но я не могу добавить экран-заставку перед запуском приложения.

Фрагмент кода в моих компонентах / loading.vue

 <template>
  <div v-if="loading" class="loading-page">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start(){
      this.loading = true
    },
    finish(){
      this.loading = false
    }
  }
}
</script>

В nuxt.js.config

 export default {
...

loading: '~/components/loading.vue'
...
}

Ответ №1:

Насколько я знаю, вы не можете использовать компонент Vue в качестве индикатора загрузки вашего приложения Nuxt.
Вместо этого вам нужно будет создать HTML-документ. Этот HTML — документ не обязательно должен иметь знак <html> <head> или <body> . Это просто должна быть заставка, которую вы хотите показать.

Вот как я это сделал:

  1. Создайте HTML-документ ~/assets/loading.html
  2. Добавьте следующее в nuxt.config.js файл.
 loadingIndicator: {
  name: '~/assets/loading.html'
}
  1. Сохраните и перезагрузите свою страницу, теперь у вас должен быть пользовательский индикатор загрузки / заставка.

Пример HTML-файла:
Вот очень простой файл для отображения изображения заставки при загрузке приложения nuxt.

 <div style="height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #004066; margin-left: -8px; margin-top: -8px; overflow: hidden;">
  <img width="90%" src="<%= options.img %>">
</div>

ПРИМЕЧАНИЕ:
Обратите внимание на <%= options.img %> . Я использую параметры, которые можно определить в nuxt.config.js простом добавлении дополнительных ключей loadingIndicator , пример можно увидеть ниже.

 loadingIndicator: {
  name: '~/assets/loading.html',
  img: '/loading.gif'
}

ПРИМЕЧАНИЕ 2:
При доступе к ресурсам, таким как изображения в индикаторе загрузки, вам нужно будет поместить их в /static папку.

Документация: https://nuxtjs.org/docs/2.x/features/loading#custom-indicators
Официальные примеры: https://github.com/nuxt/nuxt.js/tree/dev/packages/vue-app/template/views/loading