NuxtJS 中的预加载页面

Question

我有一个 NuxtJS 静态站点，其中包含静态文本、1 张 PNG 图像（来自本地 assets 文件夹）和 vue-particles 插件。

每次我访问此页面时，页面都会按以下顺序加载：

1. HTML 加载
2. PNG 图像逐渐加载。
3. vue-particles 插件会在 2 秒后加载。

在加载完整页面之前显示加载指示器的最佳方式是什么？ 对于加载指示器，我正在考虑一个全屏 CSS 覆盖 div。

Answer 1

//  1. Turn your loader ON at first
data() {
  loading: true,
},

// 2. Listen on `mounted` `hook` on `vue-particles` and turn OFF your loader:
<vue-particles @hook:mounted="loading = false"></vue-particles>