【问题标题】:How to create a Pre-Loading/ Splash Screen in Nuxt.js before the app starts?如何在应用启动前在 Nuxt.js 中创建预加载/启动画面?
【发布时间】:2021-01-20 01:16:14
【问题描述】:

我尝试在路由之间添加一个加载器,如 nuxt.js 文档中所示,但它不起作用。但我无法在应用启动前添加启动画面。

我的 components/loading.vue

中的代码 sn-p
<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'
...
}

【问题讨论】:

    标签: vue.js nuxt.js splash-screen nuxtjs


    【解决方案1】:

    据我所知,您不能将 Vue 组件用作 Nuxt 应用的加载指示器。
    您将不得不创建一个 HTML 文档。此 HTML 文档不必有 &lt;html&gt;&lt;head&gt;&lt;body&gt;。它只需要是您想要显示的初始屏幕即可。

    我是这样做的:

    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>
    

    注意:
    关注&lt;%= options.img %&gt;。我正在使用选项,可以在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

    【讨论】:

    • 完美运行!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-23
    • 1970-01-01
    • 2023-03-11
    • 1970-01-01
    相关资源
    最近更新 更多