javascript - 我如何在 Vue.js 中创建启动屏幕？

基本上我想创建一个启动画面。它应该至少显示 X 秒，或者显示直到应用程序加载完成所需的时间。

我在想类似于在屏幕中央大大的应用程序图标，淡入然后淡出，背景是黑色不透明的。可能还会有一个加载条，如果时间超过最少的 X 秒数，它也会淡入。

我该如何最好地完成这件事？

更新：只是想澄清一下，我在寻找的是关于这个话题的讨论，而不是可以直接复制粘贴的代码，我完全有能力自己写这方面的代码，只是想对解决这个问题的最佳方法征求一些意见。

例如，我目前正在尝试一种基于 CSS 的方法，并使用一个 div 来包含启动屏幕，一旦应用程序运行到足够阶段，它将向其中添加一个加载条，并且一旦加载完成 100%，它将从 DOM 中移除。

有人知道更好的方法吗？

答案＃1

所以启动画面应该存在于你的 Vue 实例的外部，而 Vue 应做的只是启动画面一旦启用就将其移除。移除通常在你的 App.vue 文件的mounted() 钩子中处理。

在此基础上的一个增强是拥有一个相对静态的启动画面，然后在你应用的 created() 钩子中添加加载器，该加载器会在 mounted()/updated() 中被移除。

关于你现在设置中非 Vue 部分：在你的 index.html 中，应用的包装器（你挂载 Vue 实例的地方）应该包含所有启动页的标记，这样一旦 App.vue 加载到其中，它就会自动被移除。否则，你就必须进行手动清理。

你的示例在仅使用 CSS 的方法下运行良好。先回应一下评论：你使用的首选解决方案哪里没有奏效？你是遇到了麻烦，还是只是还没尝试呢？

答案＃2

类似于@Kano 所说的；

只需将您的“闪屏内容”添加到 ./public/index.html，方法如下：

  <div id="app">
    <div 
      style="
        background-image: url('./img/icons/android-chrome-512x512.png');
        background-position: center center;
        background-repeat: no-repeat;
        position: absolute;
        height: 100%; width: 100%
      "
    ></div>
  </div>
  <!-- Built files will be auto injected into `id=app`.
       Any content within will show during the bootstrap
       and will be stripped once the app has fully mounted-->