Question

基本上我想创建一个启动画面。它应显示最少X个秒或应用程序加载所需的时间。

我正在想像屏幕中间大的应用程序徽标褪色然后用黑色不透明的背景。如果时间比X个最小秒数花费的时间更多，那么加载条也可能会消失。

我最好如何做到这一点？

更新：只是为了澄清我正在寻找关于该主题的讨论而不是复制可用代码，我完全有能力在这个问题上做我自己的代码，只是想要一些关于解决这个问题的最佳方法的输入。

例如，我正在尝试使用基于CSS的方法和div来包含启动画面，一旦应用程序足够远，就会向它添加一个加载栏，一旦加载100％，它就会被删除来自DOM。

有人知道更好的方法吗？

Answer 1

因此，启动应该在您的Vue实例的外部生活，并且Vue应该做的就是在它生效后删除它。删除通常在App.vue文件的mounted()挂钩中处理。

除此之外的增强功能还包括静态启动，然后在应用的created()挂钩中添加加载程序，该加载程序将在mounted() / updated()中删除。

现在关于你的设置的非Vue部分：在你的index.html中，应用程序的包装器（你安装你的Vue实例）应该包含你的启动的所有标记，这样一旦App.vue自动删除它在里面加载。否则你只需要进行手动清理。

您的示例适用于仅CSS方法。解决一段时间的评论：没有使用您的首选解决方案？你遇到了什么麻烦或者还没有给它一个忙吗？

Answer 2

类似于@Kano was saying；

只需将您的“初始内容”添加到./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-->

如何在Vue.js中创建启动画面？

2 个答案: