feat: 添加 vite-plugin-vue-layouts 插件并更新 vite 版本至 6.0.5

package.json

@@ -106,6 +106,7 @@
     "vite-plugin-cdn-import": "^1.0.1",
     "vite-plugin-fake-server": "^2.1.4",
     "vite-plugin-vue-devtools": "^7.6.8",
+    "vite-plugin-vue-layouts": "^0.11.0",
     "vue-tsc": "^2.2.0"
   }
 }

pnpm-lock.yaml

@@ -5,7 +5,7 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  vite: ^6.0.3
+  vite: ^6.0.5
 
 importers:
 
@@ -237,6 +237,9 @@ importers:
       vite-plugin-vue-devtools:
         specifier: ^7.6.8
         version: 7.6.8(@nuxt/kit@3.14.1592(rollup@4.29.1))(rollup@4.29.1)(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(tsx@4.19.2)(yaml@2.6.1))(vue@3.5.13(typescript@5.7.2))
+      vite-plugin-vue-layouts:
+        specifier: ^0.11.0
+        version: 0.11.0(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(tsx@4.19.2)(yaml@2.6.1))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
       vue-tsc:
         specifier: ^2.2.0
         version: 2.2.0(typescript@5.7.2)
@@ -1487,7 +1490,7 @@ packages:
   '@unocss/astro@0.65.2':
     resolution: {integrity: sha512-lpGoleJToxaYeN5LTGrNbvbXATNWswgoQwlljIJ9kWOjx4NbGC71pXRvDQSb9yRFDTCr5S2hMtupna4ulrHisA==}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
     peerDependenciesMeta:
       vite:
         optional: true
@@ -1565,7 +1568,7 @@ packages:
   '@unocss/vite@0.65.2':
     resolution: {integrity: sha512-MC2PqDB2tbYky7s1XTBoOAdtvUIwwl65qL1UbHTLYiWO9Q704IZUYvrdtpgieR+8IPu2dG2vUyIe3dbD4zPf9g==}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
 
   '@vant/auto-import-resolver@1.2.1':
     resolution: {integrity: sha512-czGWW4UolNITkF3qQSQlpHDHAsI3/GHVKbRMmEEpry7NWdnU4p5a5jBi0VApbaLa5g80Hy10XVs3IB+UozoSUw==}
@@ -1636,14 +1639,14 @@ packages:
     resolution: {integrity: sha512-uMJqv/7u1zz/9NbWAD3XdjaY20tKTf17XVfQ9zq4wY1BjsB/PjpJPMe2xiG39QpP4ZdhYNhm4Hvo66uJrykNLA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
       vue: ^3.0.0
 
   '@vitejs/plugin-vue@5.2.1':
     resolution: {integrity: sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
       vue: ^3.2.25
 
   '@volar/language-core@2.4.11':
@@ -1738,7 +1741,7 @@ packages:
     resolution: {integrity: sha512-bsNFXYZpLT6wiqBiJ5Ej4n76b/mV/S6y+R9Djd3r9smr7BneYcNtYuIFZU3BeQKP6+Zb+QEXPvp7jWhM4nQG+w==}
     engines: {node: '>=16.14.0'}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
     peerDependenciesMeta:
       vite:
         optional: true
@@ -4775,7 +4778,7 @@ packages:
     engines: {node: '>=14'}
     peerDependencies:
       '@unocss/webpack': 0.65.2
-      vite: ^6.0.3
+      vite: ^6.0.5
     peerDependenciesMeta:
       '@unocss/webpack':
         optional: true
@@ -4806,7 +4809,7 @@ packages:
       esbuild: '>=0.13'
       rolldown: '*'
       rollup: ^3.2.0 || ^4.0.0
-      vite: ^6.0.3
+      vite: ^6.0.5
       webpack: 4 || 5
     peerDependenciesMeta:
       '@rspack/core':
@@ -4871,7 +4874,7 @@ packages:
   unplugin-vue-markdown@0.28.0:
     resolution: {integrity: sha512-oQqR5EM585vJmcSIm1yXAgJ2PnCyrG7Hu8GvIO2tjB0ZTdrt01ujAzjonedsECgjC03Mk0AGo83CWtVr4hK5OQ==}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
 
   unplugin-vue-router@0.10.9:
     resolution: {integrity: sha512-DXmC0GMcROOnCmN56GRvi1bkkG1BnVs4xJqNvucBUeZkmB245URvtxOfbo3H6q4SOUQQbLPYWd6InzvjRh363A==}
@@ -4945,7 +4948,7 @@ packages:
   vite-hot-client@0.2.4:
     resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
 
   vite-plugin-cdn-import@1.0.1:
     resolution: {integrity: sha512-lgjLxgwFSKvJLbqjVBirUZ0rQo00GpUGJzRpgQu8RyBw9LA7jaqG6fUMQzBC9qWmTGabPC3iOzwCcoi7PseRAQ==}
@@ -4954,7 +4957,7 @@ packages:
     resolution: {integrity: sha512-R5oVY8xDJjLXLTs2XDYzvYbc/RTZuIwOx2xcFbYf+/VXB6eJuatDgt8jzQ7kZ+IrgwQhe6tU8U2fTyy72C25CQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
 
   vite-plugin-fake-server@2.1.4:
     resolution: {integrity: sha512-NngGc5aBTHftIW64OkJfrlU9Xu0TVuXjn0KkUJEHSAbvCN0eVv6zs9l+odjvHhGwE7AV0HgGMtLIwP8SvLgwRQ==}
@@ -4964,7 +4967,7 @@ packages:
     engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': '*'
-      vite: ^6.0.3
+      vite: ^6.0.5
     peerDependenciesMeta:
       '@nuxt/kit':
         optional: true
@@ -4973,17 +4976,24 @@ packages:
     resolution: {integrity: sha512-32aIps8C1Y7UEoqyWf+ES3J1OozsCYMIqTqd+I5qass+R0Tcf8SaA2bX1/rskAzkcKCteVoBjEENmqwTcMebbw==}
     engines: {node: '>=v14.21.3'}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
 
   vite-plugin-vue-inspector@5.3.1:
     resolution: {integrity: sha512-cBk172kZKTdvGpJuzCCLg8lJ909wopwsu3Ve9FsL1XsnLBiRT9U3MePcqrgGHgCX2ZgkqZmAGR8taxw+TV6s7A==}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
+
+  vite-plugin-vue-layouts@0.11.0:
+    resolution: {integrity: sha512-uh6NW7lt+aOXujK4eHfiNbeo55K9OTuB7fnv+5RVc4OBn/cZull6ThXdYH03JzKanUfgt6QZ37NbbtJ0og59qw==}
+    peerDependencies:
+      vite: ^6.0.5
+      vue: ^3.2.4
+      vue-router: ^4.0.11
 
   vite-plugin-webfont-dl@3.10.3:
     resolution: {integrity: sha512-9rRla7tYeDPRAApWWUdv0lGnU/rc2heyeH6EWj8PvGOuyLkbZo8mHo0QJpBBGKrwPyhadhN08iQhTKoFqQPIfA==}
     peerDependencies:
-      vite: ^6.0.3
+      vite: ^6.0.5
 
   vite@6.0.5:
     resolution: {integrity: sha512-akD5IAH/ID5imgue2DYhzsEwCi0/4VKY31uhMLEYJwPP4TiUp8pL5PIK+Wo7H8qT8JY9i+pVfPydcFPYD1EL7g==}
@@ -10465,6 +10475,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vite-plugin-vue-layouts@0.11.0(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(tsx@4.19.2)(yaml@2.6.1))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2)):
+    dependencies:
+      debug: 4.4.0
+      fast-glob: 3.3.2
+      vite: 6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(tsx@4.19.2)(yaml@2.6.1)
+      vue: 3.5.13(typescript@5.7.2)
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.2))
+    transitivePeerDependencies:
+      - supports-color
+
   vite-plugin-webfont-dl@3.10.3(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(less@4.2.1)(tsx@4.19.2)(yaml@2.6.1)):
     dependencies:
       axios: 1.7.9

src/layouts/default.vue

@@ -0,0 +1,9 @@
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+</script>
+
+<style scoped></style>

src/main.ts

@@ -8,7 +8,7 @@ async function init() {
     // https://github.com/antfu-collective/vitesse/blob/47618e72dfba76c77b9b85b94784d739e35c492b/src/modules/README.md
     type UserPluginContext = { app: import('vue').App<Element> };
     type UserPlugin = (ctx: UserPluginContext) => void;
-    Object.values(import.meta.glob<{ install: UserPlugin }>('./plugins/**.ts', { eager: true })).forEach((i) =>
+    Object.values(import.meta.glob<{ install: UserPlugin }>('./plugins/*.ts', { eager: true })).forEach((i) =>
       i.install?.({ app }),
     );
   }

src/plugins/pinia.ts

@@ -6,4 +6,4 @@ export function install({ app }: { app: import('vue').App<Element> }) {
   app.use(PiniaColada, {});
 }
 
-export * from './counter';
+export * from '../stores/counter';

src/plugins/router.ts

@@ -1,10 +1,11 @@
 import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
-import { createRouter, createWebHistory } from 'vue-router';
+import { setupLayouts } from 'virtual:generated-layouts';
+import { createRouter, createWebHistory } from 'vue-router/auto';
 import { handleHotUpdate, routes } from 'vue-router/auto-routes';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
+  routes: setupLayouts(routes),
   strict: true,
   scrollBehavior: () => ({ left: 0, top: 0 }),
 });

src/types/env.ts

@@ -1,5 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="unplugin-vue-router/client" />
-/// <reference types="unplugin-vue-macros/macros-global" />
-/// <reference types="unplugin-icons/types/vue" />
-/// <reference types="@intlify/unplugin-vue-i18n/messages" />

tsconfig.app.json

@@ -11,6 +11,16 @@
   ],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
+    "types": [
+      // "vitest",
+      "vite/client",
+      "vite-plugin-vue-layouts/client",
+      // "vite-plugin-pwa/client",
+      "unplugin-vue-macros/macros-global",
+      "unplugin-vue-router/client",
+      "unplugin-icons/types/vue",
+      "@intlify/unplugin-vue-i18n/messages"
+    ],
     "composite": true,
     "moduleResolution": "Bundler",
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

vite.config.plugins.ts

@@ -1,4 +1,8 @@
-import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+/**
+ * https://github.com/antfu-collective/vitesse/blob/47618e72dfba76c77b9b85b94784d739e35c492b/vite.config.ts
+ * https://github.com/vue-macros/vue-macros/blob/main/playground/vue3/vite.config.ts
+ */
+import VueI18n from '@intlify/unplugin-vue-i18n/vite';
 import { PrimeVueResolver } from '@primevue/auto-import-resolver';
 import { unheadVueComposablesImports } from '@unhead/vue';
 import { VantResolver } from '@vant/auto-import-resolver';
@@ -20,8 +24,9 @@ import { createUtils4uAutoImports } from 'utils4u/auto-imports';
 import { PluginOption } from 'vite';
 import cdnImport from 'vite-plugin-cdn-import';
 import { vitePluginFakeServer } from 'vite-plugin-fake-server';
-import vueDevTools from 'vite-plugin-vue-devtools';
+import VueDevTools from 'vite-plugin-vue-devtools';
-import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';
+import Layouts from 'vite-plugin-vue-layouts';
+import { ViteWebfontDownload as WebfontDownload } from 'vite-plugin-webfont-dl';
 
 export function Plugins() {
   const plugins: PluginOption[] = [];
@@ -29,34 +34,56 @@ export function Plugins() {
   plugins.push(
     VueMacros({
       plugins: {
+        // https://uvr.esm.is/guide/configuration.html
+        // https://github.com/posva/unplugin-vue-router
         vueRouter: VueRouter({
           routesFolder: 'src/pages',
           exclude: ['**/__*', '**/__*/**/*'],
           getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
           logs: false,
           extensions: ['.vue', '.page.vue', '.md'],
-        }), // https://uvr.esm.is/guide/configuration.html
+        }),
         vue: Vue({ include: [/\.vue$/, /\.md$/] }),
         vueJsx: VueJsx(), // 如有需要
       },
     }), // https://vue-macros.dev/zh-CN/guide/bundler-integration.html
-    UnoCSS(),
-    Markdown({ headEnabled: true }),
-  );
 
-  plugins.push(
+    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
+    Layouts(),
+
+    // https://github.com/antfu/unocss
+    // see uno.config.ts for config
+    UnoCSS(),
+
+    // https://github.com/unplugin/unplugin-vue-markdown
+    Markdown({
+      headEnabled: true,
+    }),
+
+    // https://github.com/antfu/unplugin-auto-import
     AutoImport({
       resolvers: [TDesignResolver({ library: 'mobile-vue', esm: true }), VantResolver({ importStyle: true })],
       imports: [
         'vue',
+        'vue-i18n',
         'pinia',
         '@vueuse/core',
         VueRouterAutoImports,
         unheadVueComposablesImports,
         createUtils4uAutoImports(['primevue']),
-        'vue-i18n',
+        {
+          // add any other imports you were relying on
+          'vue-router/auto': ['useLink'],
+        },
       ],
+      dirs: [
+        // 'src/composables',
+        'src/stores',
+      ],
+      vueTemplate: true,
     }),
+
+    // https://github.com/antfu/unplugin-vue-components
     Components({
       // allow auto load markdown components under `./src/components/`
       extensions: ['vue', 'md'],
@@ -74,36 +101,9 @@ export function Plugins() {
         PrimeVueResolver(/* { components: { prefix: 'P' } } */),
       ],
     }),
-    Icons({
-      autoInstall: true,
-      customCollections: {
-        svg: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
-          return svg.replace(/^<svg /, '<svg fill="currentColor" ');
-        }),
-      },
-      iconCustomizer(collection, icon, props) {
-        props.class = 'unplugin-icons';
-      },
-    }),
-  );
 
-  plugins.push(
+    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
-    vueDevTools({
+    VueI18n({
-      // launchEditor: env.LAUNCH_EDITOR,
-    }),
-  );
-
-  plugins.push(
-    // https://github.com/feat-agency/vite-plugin-webfont-dl?tab=readme-ov-file#-usage-simple-config-method-b-
-    ViteWebfontDownload([
-      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
-      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap',
-      'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900',
-    ]),
-  );
-
-  plugins.push(
-    VueI18nPlugin({
       /* options */
       // locale messages resource pre-compile option
       include: [path.resolve(__dirname, './src/locales/**')],
@@ -115,9 +115,31 @@ export function Plugins() {
       //   return src as string;
       // },
     }),
-  );
 
-  plugins.push(
+    Icons({
+      autoInstall: true,
+      customCollections: {
+        svg: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
+          return svg.replace(/^<svg /, '<svg fill="currentColor" ');
+        }),
+      },
+      iconCustomizer(collection, icon, props) {
+        props.class = 'unplugin-icons';
+      },
+    }),
+
+    // https://github.com/feat-agency/vite-plugin-webfont-dl?tab=readme-ov-file#-usage-simple-config-method-b-
+    WebfontDownload([
+      'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
+      'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap',
+      'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900',
+    ]),
+
+    // https://github.com/webfansplz/vite-plugin-vue-devtools
+    VueDevTools({
+      // launchEditor: env.LAUNCH_EDITOR,
+    }),
+
     // https://github.com/condorheroblog/vite-plugin-fake-server?tab=readme-ov-file#usage
     vitePluginFakeServer({
       include: 'fake',