【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项

环境：vue3 + vuetify3 + unplugin-vue-router
是怎么创建这个项目的：
选择它推荐的设置（Recommend）

问题描述

代码结构

# App.vue
<template>
  <v-app> 
    <AppNavigator /> 
    <RouterView />
    <AppFooter />
  </v-app>

</template>

我发现渲染出来的页面，会有两个AppFooter，分析了好几遍代码，都没有发现有多余的 AppFooter，于是我 Find in Folder，发现 layouts/default.vue 下面有个 AppFooter。

分析

layouts 顾名思义，这个是制作某些布局的文件夹，defaul.vue 就是默认布局，结合代码可以推测，layouts/default.vue 是定义 <RouterVuew /> 标签的默认布局，可以使用 vue-devtool，很容易就能发现这一点。

再看一下 layouts 文件夹下的 README.md 文件：

Layouts

Layouts are reusable components that wrap around pages. They are used
to provide a consistent look and feel across multiple pages.

Full documentation for this feature can be found in the Official
vite-plugin-vue-layouts
repository.

也就是说 layouts，是包裹pages的可复用组件。它们被用来在多个页面之间提供一直的外观。

简言之，layouts 就是给 pages 下的页面文件提供布局设置的。

接下来，我们来看一下vite-plugin-vue-layouts官方文档是怎么解释的:

这与 vite-plugin-pages 一起使用效果最好。
布局默认存储在 /src/layouts 文件夹中，是模板中带有 a <router-view></router-view> 的标准 Vue 组件。
未指定布局的页面使用 default.vue 作为其布局。
您可以使用路由块来允许每个页面确定其布局。 page 下方的块将查找/src/layouts/users.vue 作为其布局。

简言之，layouts 文件夹下的vue文件是 <RouterView /> 的布局模板，未指定布局的页面会使用 default.vue 作为默认布局。使用了 unplugin-vue-router 自动路由之后，pages 下的页面会自动到 layouts 下查找并应用自己的布局模板。