examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
严浩
2024-12-25 00:06:46 +08:00
parent 400de0f222
commit bfbeb326bc
14 changed files with 122 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"
}
}

50
pnpm-lock.yaml generated
View File

@ -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

9
src/layouts/default.vue Normal file
View File

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

2
src/main.ts
View File

@ -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 }),
);
}

0
src/plugins/_/_.ts → src/plugins/_.ts
View File

0
src/plugins/eruda/index.ts → src/plugins/index.ts
View File

2
src/plugins/pinia/index.ts → src/plugins/pinia.ts
View File

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

0
src/plugins/primevue/index.ts → src/plugins/primevue.ts
View File

5
src/plugins/router/index.ts → src/plugins/router.ts
View File

@ -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 }),
});

0
src/plugins/vue-i18n/index.ts → src/plugins/vue-i18n.ts
View File

0
src/plugins/pinia/counter.ts → src/stores/counter.ts
View File

5
src/types/env.ts
View File

@ -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" />

10
tsconfig.app.json
View File

@ -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",

102
vite.config.plugins.ts
View File

@ -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',