From f72cbfdc0cd7c740c0d56f6a1a6035759e283117 Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 15 Mar 2024 21:21:36 +0800 Subject: [PATCH] feat: add vue3-auto-import example (#32) --- rsbuild/vue3-auto-import/.gitignore | 13 ++++ .../vue3-auto-import/.vscode/extensions.json | 3 + rsbuild/vue3-auto-import/README.md | 29 ++++++++ rsbuild/vue3-auto-import/auto-imports.d.ts | 66 +++++++++++++++++++ rsbuild/vue3-auto-import/package.json | 19 ++++++ rsbuild/vue3-auto-import/rsbuild.config.ts | 23 +++++++ rsbuild/vue3-auto-import/src/App.vue | 32 +++++++++ rsbuild/vue3-auto-import/src/env.d.ts | 9 +++ rsbuild/vue3-auto-import/src/index.css | 6 ++ rsbuild/vue3-auto-import/src/index.ts | 4 ++ rsbuild/vue3-auto-import/tsconfig.json | 16 +++++ 11 files changed, 220 insertions(+) create mode 100644 rsbuild/vue3-auto-import/.gitignore create mode 100644 rsbuild/vue3-auto-import/.vscode/extensions.json create mode 100644 rsbuild/vue3-auto-import/README.md create mode 100644 rsbuild/vue3-auto-import/auto-imports.d.ts create mode 100644 rsbuild/vue3-auto-import/package.json create mode 100644 rsbuild/vue3-auto-import/rsbuild.config.ts create mode 100644 rsbuild/vue3-auto-import/src/App.vue create mode 100644 rsbuild/vue3-auto-import/src/env.d.ts create mode 100644 rsbuild/vue3-auto-import/src/index.css create mode 100644 rsbuild/vue3-auto-import/src/index.ts create mode 100644 rsbuild/vue3-auto-import/tsconfig.json diff --git a/rsbuild/vue3-auto-import/.gitignore b/rsbuild/vue3-auto-import/.gitignore new file mode 100644 index 00000000..38d7344c --- /dev/null +++ b/rsbuild/vue3-auto-import/.gitignore @@ -0,0 +1,13 @@ +# Local +.DS_Store +*.local +*.log* + +# Dist +node_modules +dist/ + +# IDE +.vscode/* +!.vscode/extensions.json +.idea diff --git a/rsbuild/vue3-auto-import/.vscode/extensions.json b/rsbuild/vue3-auto-import/.vscode/extensions.json new file mode 100644 index 00000000..c0a6e5a4 --- /dev/null +++ b/rsbuild/vue3-auto-import/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] +} diff --git a/rsbuild/vue3-auto-import/README.md b/rsbuild/vue3-auto-import/README.md new file mode 100644 index 00000000..37b1dd33 --- /dev/null +++ b/rsbuild/vue3-auto-import/README.md @@ -0,0 +1,29 @@ +# Rsbuild Project + +## Setup + +Install the dependencies: + +```bash +pnpm install +``` + +## Get Started + +Start the dev server: + +```bash +pnpm dev +``` + +Build the app for production: + +```bash +pnpm build +``` + +Preview the production build locally: + +```bash +pnpm preview +``` diff --git a/rsbuild/vue3-auto-import/auto-imports.d.ts b/rsbuild/vue3-auto-import/auto-imports.d.ts new file mode 100644 index 00000000..d298c3cc --- /dev/null +++ b/rsbuild/vue3-auto-import/auto-imports.d.ts @@ -0,0 +1,66 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// noinspection JSUnusedGlobalSymbols +// Generated by unplugin-auto-import +export {} +declare global { + const EffectScope: typeof import('vue')['EffectScope'] + const computed: typeof import('vue')['computed'] + const createApp: typeof import('vue')['createApp'] + const customRef: typeof import('vue')['customRef'] + const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] + const defineComponent: typeof import('vue')['defineComponent'] + const effectScope: typeof import('vue')['effectScope'] + const getCurrentInstance: typeof import('vue')['getCurrentInstance'] + const getCurrentScope: typeof import('vue')['getCurrentScope'] + const h: typeof import('vue')['h'] + const inject: typeof import('vue')['inject'] + const isProxy: typeof import('vue')['isProxy'] + const isReactive: typeof import('vue')['isReactive'] + const isReadonly: typeof import('vue')['isReadonly'] + const isRef: typeof import('vue')['isRef'] + const markRaw: typeof import('vue')['markRaw'] + const nextTick: typeof import('vue')['nextTick'] + const onActivated: typeof import('vue')['onActivated'] + const onBeforeMount: typeof import('vue')['onBeforeMount'] + const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'] + const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'] + const onDeactivated: typeof import('vue')['onDeactivated'] + const onErrorCaptured: typeof import('vue')['onErrorCaptured'] + const onMounted: typeof import('vue')['onMounted'] + const onRenderTracked: typeof import('vue')['onRenderTracked'] + const onRenderTriggered: typeof import('vue')['onRenderTriggered'] + const onScopeDispose: typeof import('vue')['onScopeDispose'] + const onServerPrefetch: typeof import('vue')['onServerPrefetch'] + const onUnmounted: typeof import('vue')['onUnmounted'] + const onUpdated: typeof import('vue')['onUpdated'] + const provide: typeof import('vue')['provide'] + const reactive: typeof import('vue')['reactive'] + const readonly: typeof import('vue')['readonly'] + const ref: typeof import('vue')['ref'] + const resolveComponent: typeof import('vue')['resolveComponent'] + const shallowReactive: typeof import('vue')['shallowReactive'] + const shallowReadonly: typeof import('vue')['shallowReadonly'] + const shallowRef: typeof import('vue')['shallowRef'] + const toRaw: typeof import('vue')['toRaw'] + const toRef: typeof import('vue')['toRef'] + const toRefs: typeof import('vue')['toRefs'] + const toValue: typeof import('vue')['toValue'] + const triggerRef: typeof import('vue')['triggerRef'] + const unref: typeof import('vue')['unref'] + const useAttrs: typeof import('vue')['useAttrs'] + const useCssModule: typeof import('vue')['useCssModule'] + const useCssVars: typeof import('vue')['useCssVars'] + const useSlots: typeof import('vue')['useSlots'] + const watch: typeof import('vue')['watch'] + const watchEffect: typeof import('vue')['watchEffect'] + const watchPostEffect: typeof import('vue')['watchPostEffect'] + const watchSyncEffect: typeof import('vue')['watchSyncEffect'] +} +// for type re-export +declare global { + // @ts-ignore + export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue' + import('vue') +} diff --git a/rsbuild/vue3-auto-import/package.json b/rsbuild/vue3-auto-import/package.json new file mode 100644 index 00000000..400a1350 --- /dev/null +++ b/rsbuild/vue3-auto-import/package.json @@ -0,0 +1,19 @@ +{ + "name": "rsbuild-vue3", + "private": true, + "version": "1.0.0", + "scripts": { + "dev": "rsbuild dev --open", + "build": "rsbuild build", + "preview": "rsbuild preview" + }, + "dependencies": { + "vue": "^3.4.19" + }, + "devDependencies": { + "@rsbuild/core": "^0.4.8", + "@rsbuild/plugin-vue": "^0.4.8", + "typescript": "^5.3.0", + "unplugin-auto-import": "^0.17.5" + } +} \ No newline at end of file diff --git a/rsbuild/vue3-auto-import/rsbuild.config.ts b/rsbuild/vue3-auto-import/rsbuild.config.ts new file mode 100644 index 00000000..79f40db7 --- /dev/null +++ b/rsbuild/vue3-auto-import/rsbuild.config.ts @@ -0,0 +1,23 @@ +import { defineConfig } from "@rsbuild/core"; +import { pluginVue } from "@rsbuild/plugin-vue"; +import AutoImport from "unplugin-auto-import/rspack"; + +export default defineConfig({ + plugins: [pluginVue()], + tools: { + rspack: { + plugins: [ + AutoImport({ + // targets to transform + include: [ + /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx + /\.vue$/, + /\.vue\?vue/, // .vue + ], + // global imports to register + imports: ["vue"], + }), + ], + }, + }, +}); diff --git a/rsbuild/vue3-auto-import/src/App.vue b/rsbuild/vue3-auto-import/src/App.vue new file mode 100644 index 00000000..7d4f471e --- /dev/null +++ b/rsbuild/vue3-auto-import/src/App.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/rsbuild/vue3-auto-import/src/env.d.ts b/rsbuild/vue3-auto-import/src/env.d.ts new file mode 100644 index 00000000..502e9f96 --- /dev/null +++ b/rsbuild/vue3-auto-import/src/env.d.ts @@ -0,0 +1,9 @@ +/// + +declare module '*.vue' { + import type { DefineComponent } from 'vue'; + + // eslint-disable-next-line + const component: DefineComponent<{}, {}, any>; + export default component; +} diff --git a/rsbuild/vue3-auto-import/src/index.css b/rsbuild/vue3-auto-import/src/index.css new file mode 100644 index 00000000..85e7e2b4 --- /dev/null +++ b/rsbuild/vue3-auto-import/src/index.css @@ -0,0 +1,6 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} diff --git a/rsbuild/vue3-auto-import/src/index.ts b/rsbuild/vue3-auto-import/src/index.ts new file mode 100644 index 00000000..688e3ee2 --- /dev/null +++ b/rsbuild/vue3-auto-import/src/index.ts @@ -0,0 +1,4 @@ +import './index.css'; +import App from './App.vue'; + +createApp(App).mount('#root'); diff --git a/rsbuild/vue3-auto-import/tsconfig.json b/rsbuild/vue3-auto-import/tsconfig.json new file mode 100644 index 00000000..40476c27 --- /dev/null +++ b/rsbuild/vue3-auto-import/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "ES2020", + "lib": ["DOM", "ES2020"], + "module": "ESNext", + "jsx": "preserve", + "jsxImportSource": "vue", + "strict": true, + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true, + "moduleResolution": "bundler", + "useDefineForClassFields": true + }, + "include": ["src", "auto-imports.d.ts"] +}