From bfbeb326bc9db4ca25ac2d145a93f4558b52e7ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <37316281+yanhao98@users.noreply.github.com> Date: Wed, 25 Dec 2024 00:06:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20vite-plugin-vue-la?= =?UTF-8?q?youts=20=E6=8F=92=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0=20vite=20?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E8=87=B3=206.0.5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 50 ++++++--- src/layouts/default.vue | 9 ++ src/main.ts | 2 +- src/plugins/{_ => }/_.ts | 0 src/plugins/{eruda => }/index.ts | 0 src/plugins/{pinia/index.ts => pinia.ts} | 2 +- .../{primevue/index.ts => primevue.ts} | 0 src/plugins/{router/index.ts => router.ts} | 5 +- .../{vue-i18n/index.ts => vue-i18n.ts} | 0 src/{plugins/pinia => stores}/counter.ts | 0 src/types/env.ts | 5 - tsconfig.app.json | 10 ++ vite.config.plugins.ts | 102 +++++++++++------- 14 files changed, 122 insertions(+), 64 deletions(-) create mode 100644 src/layouts/default.vue rename src/plugins/{_ => }/_.ts (100%) rename src/plugins/{eruda => }/index.ts (100%) rename src/plugins/{pinia/index.ts => pinia.ts} (88%) rename src/plugins/{primevue/index.ts => primevue.ts} (100%) rename src/plugins/{router/index.ts => router.ts} (88%) rename src/plugins/{vue-i18n/index.ts => vue-i18n.ts} (100%) rename src/{plugins/pinia => stores}/counter.ts (100%) delete mode 100644 src/types/env.ts diff --git a/package.json b/package.json index 3a6639e..a463c40 100644 --- a/package.json +++ b/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" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 94d1513..cb5c810 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/layouts/default.vue b/src/layouts/default.vue new file mode 100644 index 0000000..6357ca2 --- /dev/null +++ b/src/layouts/default.vue @@ -0,0 +1,9 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index 5d4dd21..f9836d6 100644 --- a/src/main.ts +++ b/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 }; 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 }), ); } diff --git a/src/plugins/_/_.ts b/src/plugins/_.ts similarity index 100% rename from src/plugins/_/_.ts rename to src/plugins/_.ts diff --git a/src/plugins/eruda/index.ts b/src/plugins/index.ts similarity index 100% rename from src/plugins/eruda/index.ts rename to src/plugins/index.ts diff --git a/src/plugins/pinia/index.ts b/src/plugins/pinia.ts similarity index 88% rename from src/plugins/pinia/index.ts rename to src/plugins/pinia.ts index e4db192..3389ee4 100644 --- a/src/plugins/pinia/index.ts +++ b/src/plugins/pinia.ts @@ -6,4 +6,4 @@ export function install({ app }: { app: import('vue').App }) { app.use(PiniaColada, {}); } -export * from './counter'; +export * from '../stores/counter'; diff --git a/src/plugins/primevue/index.ts b/src/plugins/primevue.ts similarity index 100% rename from src/plugins/primevue/index.ts rename to src/plugins/primevue.ts diff --git a/src/plugins/router/index.ts b/src/plugins/router.ts similarity index 88% rename from src/plugins/router/index.ts rename to src/plugins/router.ts index 8af5701..1af60ef 100644 --- a/src/plugins/router/index.ts +++ b/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 }), }); diff --git a/src/plugins/vue-i18n/index.ts b/src/plugins/vue-i18n.ts similarity index 100% rename from src/plugins/vue-i18n/index.ts rename to src/plugins/vue-i18n.ts diff --git a/src/plugins/pinia/counter.ts b/src/stores/counter.ts similarity index 100% rename from src/plugins/pinia/counter.ts rename to src/stores/counter.ts diff --git a/src/types/env.ts b/src/types/env.ts deleted file mode 100644 index 08df4f1..0000000 --- a/src/types/env.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// -/// -/// -/// diff --git a/tsconfig.app.json b/tsconfig.app.json index 317f1c4..178d487 100644 --- a/tsconfig.app.json +++ b/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", diff --git a/vite.config.plugins.ts b/vite.config.plugins.ts index 312f540..9dcc5b1 100644 --- a/vite.config.plugins.ts +++ b/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(/^ { + return svg.replace(/^