vue.js - 在 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>