基本上我想创建一个启动画面。它应该至少显示 X 秒或应用加载所需的时间。
我在想像屏幕中间大的应用程序徽标那样的东西，它以黑色不透明的背景淡入然后淡出。可能还有一个加载条，如果时间花费的时间超过 X 最小秒数，它就会淡入。
我将如何最好地完成此操作？
更新：只是为了澄清我正在寻找有关该主题的讨论，而不是复制可粘贴代码，我完全有能力在这件事上编写自己的代码，只是想就解决此问题的最佳方法提供一些意见。
例如，我目前正在试验一种基于 CSS 的方法和一个 div 来包含启动画面，一旦应用程序足够远，就会向它添加一个加载栏，一旦它被 100% 加载，它就会从 DOM 中删除.
有人知道更好的方法吗？
因此，splash 应该存在于 Vue 实例之外，Vue 应该做的就是在它激活后将其删除。删除通常在 App.vue 文件的mounted()钩子中处理。
除此之外，一个增强功能是具有相当静态的启动效果，然后在应用程序的created()钩子中添加加载程序，该加载程序在mounted()/中被删除updated()。
现在关于您设置的非 Vue 部分：在您的 index.html 中，应用程序的包装器（您将 Vue 实例安装到其中）应该包含您的启动的所有标记，这样一旦 App.vue 加载到内部，它就会自动删除它的。否则你只需要进行手动清理。
您的示例仅适用于 CSS 方法。暂时解决一下评论：您的首选解决方案有什么问题？您是否遇到任何麻烦或尚未尝试？