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

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 { ViteWebfontDownload } from 'vite-plugin-webfont-dl';
+import VueDevTools from 'vite-plugin-vue-devtools';
+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(
-    vueDevTools({
-      // 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({
+    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+    VueI18n({
       /* 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',