vue3 预加载动画

Vue3 的预加载动画通常使用 Vue Router 以及 Vue.js 的过渡效果实现。具体步骤如下：

1. 安装 Vue Router 插件：在 Vue CLI 中，你可以使用以下命令安装 Vue Router：

npm install vue-router

2. 在你的 Vue 应用程序中引入 Vue Router：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...
  ]
})

3. 在你的 Vue 组件中添加过渡效果：在组件的 `<template>` 标签中，你可以使用 `<transition>` 标签来添加过渡效果：

<template>
  <div>
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

4. 定义预加载动画：在你的 CSS 样式文件中，你可以定义一个动画，例如：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

5. 启用预加载动画：在你的 Vue 组件中，你可以设置 `appear` 属性来启用预加载动画：

<template>
  <div>
    <transition name="fade" appear>
      <router-view></router-view>
    </transition>
  </div>
</template>

这样，当你的 Vue 应用程序切换路由时，就会显示预加载动画了。