project init

.env.development

@@ -0,0 +1,2 @@
+#开发环境
+NODE_ENV = 'development'

.env.production

@@ -0,0 +1,2 @@
+#生产环境
+NODE_ENV = 'production'

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettier.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 80, //一行最多 80 字符
+  tabWidth: 2, //使用 2 个空格缩进
+  useTabs: false, //不使用缩进符，而使用空格
+  semi: false, //行尾不需要有分号
+  singleQuote: true, //使用单引号
+  quoteProps: 'as-needed', //对象的key仅在必要时用引号
+  jsxSingleQuote: false, //jsx不使用单引号，而使用双引号
+  trailingComma: 'all', //尾随逗号
+  bracketSpacing: true, //大括号内的首尾需要空格
+  jsxBracketSameLine: false, //jsx标签的反尖括号需要换行
+  arrowParens: 'always', //箭头函数，只有一个参数的时候，也需要括号
+  rangeStart: 0, //每个文件格式化的范围是文件的全部内容
+  rangeEnd: Infinity,
+  requirePragma: false, //不需要写文件开头的@prettier
+  insertPragma: false, //不需要自动在文件开头插入@prettier
+  proseWrap: 'preserve', //使用默认的折行标准
+  htmlWhitespaceSensitivity: 'css', //根据显示样式决定html要不要折行
+  endOfLine: 'lf', //换行符使用lf
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

README.md

@@ -0,0 +1,50 @@
+# Ray template
+
+模板按照个人习惯进行原始框架、组件的引入与封装, 采用 `Vue 3` `TypeScript` `TSX` 进行开发
+
+## 启动项目
+
+`yarn dev` / `npm run dev`
+
+## 项目打包
+
+`yarn build` / `npm run build`
+
+## 项目说明
+
+## 使用开源库
+
+- [pinia](https://pinia.vuejs.org/) `全局状态管理器`
+- [@vueuse](https://vueuse.org/) `vue3 hooks`
+- [vue-router](https://router.vuejs.org/zh/) `router`
+- [axios](http://axios-js.com/zh-cn/docs/index.html) `ajax request`
+- [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html) `国际化`
+
+## 项目结构
+
+```
+- assets: 项目静态资源入口
+  - images: 项目图片资源
+
+- `component`: 全局共用组件
+
+- `icons`: 项目svg图标资源，需要配合 `RayIcon` 组件使用
+
+- `language`: 国际化
+
+- `router`: 路由表
+
+- store: `pinia` 全局状态管理入口
+  - modules
+    - setting: demo
+
+- styles: 全局公共样式入口
+
+- types: 全局 `type`
+
+- utils: 工具包
+  - `cache`: 缓存方法
+  - `element`: `dom` 相关操作方法
+
+- vite-plugin: 插件注册
+```

auto-imports.d.ts

@@ -0,0 +1,271 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createPinia: typeof import('pinia')['createPinia']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  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 makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  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 onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  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 onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}

components.d.ts

@@ -0,0 +1,15 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    DraggableComponent: typeof import('./src/components/DraggableComponent/index.vue')['default']
+    RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/ray.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "vue3-ts-template",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.1.0",
+    "axios": "^0.27.2",
+    "pinia": "^2.0.17",
+    "sass": "^1.54.3",
+    "vue": "^3.2.37",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.3"
+  },
+  "devDependencies": {
+    "@intlify/unplugin-vue-i18n": "^0.5.0",
+    "@vitejs/plugin-vue": "^3.0.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.0",
+    "prettier": "^2.7.1",
+    "typescript": "^4.6.4",
+    "unplugin-auto-import": "^0.11.0",
+    "unplugin-vue-components": "^0.22.0",
+    "vite": "^3.0.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-inspect": "^0.6.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vue-tsc": "^0.38.4"
+  }
+}

public/ray.svg

@@ -0,0 +1,14 @@
+<svg t="1659811416176" class="icon" viewBox="0 0 1147 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10290" width="64" height="64">
+  <path d="M472.342857 968.685714c-73.828571 0-130.171429-12-172.114286-36.571428-38.742857-22.742857-84.914286-68.685714-84.914285-158.057143-2.971429-141.942857 109.714286-259.542857 251.657143-262.514286 141.942857-2.971429 259.542857 109.714286 262.514285 251.657143 0.114286 3.657143 0.114286 7.2 0 10.857143 0 89.371429-46.171429 135.2-84.914285 158.057143-41.942857 24.685714-98.285714 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10291"></path>
+  <path d="M766.742857 968.685714c-73.942857 0-130.171429-12-172.228571-36.571428-38.742857-22.742857-84.914286-68.685714-84.914286-158.057143 2.857143-141.942857 120.228571-254.742857 262.285714-252 137.942857 2.742857 249.142857 113.942857 252 252 0 89.371429-46.171429 135.2-84.914285 158.057143-42.057143 24.685714-98.4 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10292"></path>
+  <path d="M512 940.571429c-153.257143 0-268.457143-24-352.457143-73.257143-50.971429-29.942857-90.514286-69.714286-117.142857-118.057143C14.285714 698.285714 0 637.028571 0 567.085714c0.114286-282.857143 229.6-512 512.457143-511.885714 205.6 0.114286 391.2 123.2 471.314286 312.571429 26.742857 63.085714 40.342857 130.857143 40.228571 199.314285 0 69.828571-14.285714 131.2-42.4 182.171429-26.742857 48.342857-66.171429 88.114286-117.142857 118.057143C780.571429 916.685714 665.257143 940.571429 512 940.571429z" fill="#25467A" p-id="10293"></path>
+  <path d="M48 567.085714c0-256.228571 207.771429-464 464-464s464 207.771429 464 464S768.228571 892.571429 512 892.571429 48 823.314286 48 567.085714z" fill="#FFF3E0" p-id="10294"></path>
+  <path d="M472.342857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.457143-74.171429-72.457143-136.342857 0-127.885714 104-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571429 136.342857-38.057143 22.4-90.171429 33.142857-159.542857 33.142857z" fill="#25467A" p-id="10295"></path>
+  <path d="M263.314286 774.057143c0-115.428571 93.485714-209.142857 209.028571-209.142857 115.428571 0 209.142857 93.485714 209.142857 209.028571v0.114286c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.028571-31.085714-209.028571-146.628571z" fill="#FFF3E0" p-id="10296"></path>
+  <path d="M472.342857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.457143 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857s-59.428571-115.657143-132.8-115.657143z" fill="#388E3C" p-id="10297"></path>
+  <path d="M766.742857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.571429-74.171429-72.571429-136.342857 0-127.885714 104.114286-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571428 136.342857-38.057143 22.4-90.171429 33.142857-159.428572 33.142857z" fill="#25467A" p-id="10298"></path>
+  <path d="M557.6 774.057143c0-115.428571 93.6-209.142857 209.142857-209.142857s209.142857 93.6 209.142857 209.142857c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.142857-31.085714-209.142857-146.628571z" fill="#FFF3E0" p-id="10299"></path>
+  <path d="M766.742857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.342857 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857S840 652.8 766.742857 652.8z" fill="#FBC02D" p-id="10300"></path>
+  <path d="M401.6 486.857143c-38.171429 0-69.142857-30.971429-69.142857-69.257143 0-7.657143 6.171429-13.828571 13.828571-13.828571 7.314286 0 13.485714 5.714286 13.828572 13.028571v0.8c-0.342857 22.971429 17.942857 41.828571 40.8 42.171429s41.828571-17.942857 42.171428-40.8v-1.371429c-0.228571-7.657143 5.828571-14.057143 13.371429-14.285714s14.057143 5.828571 14.285714 13.371428v0.8c0.114286 38.4-30.857143 69.371429-69.142857 69.371429zM221.714286 306.971429c-0.342857 22.971429 17.942857 41.828571 40.8 42.171428s41.828571-17.942857 42.171428-40.8v-1.371428c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171428 40.8v1.371429zM498.514286 306.971429c-0.342857 22.971429 17.828571 41.828571 40.8 42.285714 22.971429 0.342857 41.828571-17.828571 42.285714-40.8v-1.485714c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171429 40.8-0.114286 0.457143-0.114286 0.914286-0.114285 1.371429z" fill="#25467A" p-id="10301"></path>
+  <path d="M207.885714 376.228571h-55.314285c-15.314286-0.342857-27.885714 11.771429-28.228572 27.085715-0.342857 15.314286 11.771429 27.885714 27.085714 28.228571H208c15.314286 0.342857 27.885714-11.771429 28.228571-27.085714 0.342857-15.314286-11.771429-27.885714-27.085714-28.228572h-1.257143z m442.857143 0H595.428571c-15.314286 0-27.657143 12.342857-27.657142 27.657143s12.342857 27.657143 27.657142 27.657143h55.314286c15.314286 0.342857 27.885714-11.771429 28.228572-27.085714 0.342857-15.314286-11.771429-27.885714-27.085715-28.228572h-1.142857z" fill="#F8BBD0" p-id="10302"></path>
+</svg>

src/App.tsx

@@ -0,0 +1,35 @@
+import { defineComponent } from 'vue'
+import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' // 以封装动画路由组件
+import DraggableComponent from '@/components/DraggableComponent/index.vue'
+
+const App = defineComponent({
+  name: 'App',
+  setup() {
+    const draggableRef = ref<HTMLElement>()
+
+    const { x, y } = useMouse()
+    const { height: windowHeight } = useWindowSize()
+
+    return {
+      x,
+      y,
+      windowHeight,
+    }
+  },
+  render() {
+    return (
+      <div
+        class="app-wrapper"
+        style={`height: ${this.windowHeight}px;font-size: 22px; color: #FDD192`}
+      >
+        hello! Welcome to this template!
+        <h1>
+          当前鼠标位置: x: {this.x}, y: {this.y}
+        </h1>
+        <DraggableComponent />
+      </div>
+    )
+  },
+})
+
+export default App

src/auto-imports.d.ts

@@ -0,0 +1,273 @@
+// Generated by 'unplugin-auto-import'
+// 由于始终不能识别找到 src 下的文件，故而写了两个类型文件
+export {}
+
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createPinia: typeof import('pinia')['createPinia']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  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 makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  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 onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  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 onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}

src/axios/api/test.ts

@@ -0,0 +1,8 @@
+import request from '../request'
+
+export const useAxiosTest = () => {
+  return request({
+    method: 'post',
+    url: '',
+  })
+}

src/axios/request.ts

@@ -0,0 +1,39 @@
+import axios from 'axios'
+
+import { useDetermineEnv } from '@use-utils/hook'
+
+const server = axios.create({
+  baseURL: '', // import.meta.env,
+  withCredentials: false, // 是否允许跨域携带cookie
+  timeout: 5 * 1000,
+})
+
+server.interceptors.request.use(
+  (request) => {
+    const { MODE } = useDetermineEnv()
+
+    if (MODE === 'development') {
+      // TODO: 开发环境
+    } else if (MODE === 'production') {
+      // TODO: 生产环境
+    }
+
+    return request
+  },
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+
+server.interceptors.response.use(
+  (response) => {
+    const { data } = response
+
+    return Promise.resolve(data)
+  },
+  (error) => {
+    return Promise.reject(error)
+  },
+)
+
+export default server

src/components.d.ts

@@ -0,0 +1,15 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+// 由于始终不能识别找到 src 下的文件，故而写了两个类型文件
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    RayTransitionComponent: typeof import('./src/components/RayTransitionComponent/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

src/components/DraggableComponent/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const el = ref<HTMLElement | null>(null)
+
+const { x, y, style } = useDraggable(el, {
+  initialValue: { x: 40, y: 140 },
+})
+</script>
+
+<template>
+  <div class="draggable-component" ref="el" :style="style">
+    Drag me! I am at {{ x }}, {{ y }}
+  </div>
+</template>
+
+<style lang="scss" scope>
+.draggable-component {
+  position: fixed;
+  padding: 8px 16px;
+  border: 1px solid rgba(156, 163, 175, 0.3);
+  cursor: move;
+}
+</style>

src/components/RayIcon/index.tsx

@@ -0,0 +1,14 @@
+import { defineComponent } from 'vue'
+
+const RayIcon = defineComponent({
+  name: 'RayIcon',
+  props: {},
+  setup() {
+    return {}
+  },
+  render() {
+    return <div></div>
+  },
+})
+
+export default RayIcon

src/components/RayTransitionComponent/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <router-view v-slot="{ Component, route }">
+    <transition name="fade-transform" mode="out-in" appear>
+      <keep-alive include="Layout">
+        <component :is="Component" :key="route" />
+      </keep-alive>
+    </transition>
+  </router-view>
+</template>
+<script lang="ts" setup>
+// 带过渡动画 RouterView 组件
+// 如果子路由需要做动画切换，则需要此组件
+// 为什么必须为 vue 文件，因为 tsx 文件在解析的时候会抛出警告不好看
+</script>

src/language/index.ts

@@ -0,0 +1,14 @@
+import { createI18n } from 'vue-i18n'
+import type { App } from 'vue'
+import { useGetCache } from '@use-utils/cache'
+
+export const setupI18n = (app: App<Element>) => {
+  const i18n = createI18n({
+    locale:
+      useGetCache('languageType') !== 'no' ? useGetCache('languageType') : 'zh',
+    allowComposition: true, // you need to specify that!
+    messages: {}, // 语言包
+  })
+
+  app.use(i18n)
+}

src/main.ts

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+
+import '@/styles/base.scss'
+
+import 'virtual:svg-icons-register' // 注册 vite-plugin-svg-icons 脚本
+
+import App from './App'
+
+import { setupRouter } from './router/index'
+import { setupStore } from './store/index'
+import { setupI18n } from './language/index'
+
+const setupTemplate = () => {
+  const app = createApp(App)
+
+  setupRouter(app)
+
+  setupStore(app)
+
+  setupI18n(app)
+
+  app.mount('#app')
+}
+
+setupTemplate()

src/router/index.ts

@@ -0,0 +1,16 @@
+import type { App } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { constantRoutes } from './routes'
+
+import type { Router } from 'vue-router'
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes: constantRoutes,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+// setup router
+export const setupRouter = (app: App<Element>) => {
+  app.use(router)
+}

src/router/modules/index.ts

@@ -0,0 +1,11 @@
+import type { RouteRecordRaw } from 'vue-router'
+
+const route = import.meta.glob('./*.ts', { eager: true }) as IUnknownObjectKey
+
+const routes = Object.keys(route).reduce((modules, modulePath) => {
+  modules.push(route[modulePath].default)
+
+  return modules
+}, [] as RouteRecordRaw[])
+
+export default routes

src/router/routes.ts

@@ -0,0 +1,3 @@
+import autoLayoutChildrenRoutes from './modules/index'
+
+export const constantRoutes = []

src/store/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+
+export { useSetting } from './modules/setting' // import { useSetting } from '@/store' 即可使用
+
+const store = createPinia()
+
+export const setupStore = (app: App<Element>) => {
+  app.use(store)
+}

src/store/modules/setting.ts

@@ -0,0 +1,12 @@
+export const useSetting = defineStore('setting', () => {
+  const settingState = reactive({})
+
+  const useUpdateLanguage = (key: string) => {
+    // TODO: 修改语言
+  }
+
+  return {
+    settingState,
+    useUpdateLanguage,
+  }
+})

src/styles/animate.scss

@@ -0,0 +1,27 @@
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s var(--r-bezier);
+}
+
+.fade-enter-from,
+.fade-leave-active {
+  opacity: 0;
+  transition: all 0.5s var(--r-bezier);
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s var(--r-bezier);
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}

src/styles/base.scss

@@ -0,0 +1,50 @@
+@import "@/styles/animate.scss";
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td {
+  margin: 0;
+  padding: 0;
+}
+
+ul,
+ol,
+li {
+  list-style: none;
+}
+
+fieldset,
+img {
+  border: 0;
+  vertical-align: middle;
+}
+
+body {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/styles/mixins.scss

@@ -0,0 +1,41 @@
+// 文字溢出变为：......
+@mixin overflow-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+// 滚动条样式
+@mixin scroll-style {
+  ::-webkit-scrollbar {
+    /*改变纵向滚动条宽度*/
+    width: 5px;
+    height: 5px;
+    transition: background-color 0.2s var(--r-scrollbar-bezier);
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar-track {
+    /*改变滚动条轨道颜色*/
+    border-radius: 5px;
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    /*改变滚动条滑轨相关的样式*/
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    /* 移入鼠标效果 */
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.3);
+    cursor: pointer;
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/types/cache.d.ts

@@ -0,0 +1,5 @@
+export {}
+
+declare global {
+  declare type TCacheType = 'sessionStorage' | 'localStorage'
+}

src/types/index.d.ts

@@ -0,0 +1,25 @@
+export {}
+
+export global {
+  declare interface IUnknownObjectKey {
+    [propName: string]: any
+  }
+
+  declare type EventListenerOrEventListenerObject =
+    | EventListener
+    | EventListenerObject
+
+  declare type ValidteValueType =
+    | 'Number'
+    | 'String'
+    | 'Boolean'
+    | 'Object'
+    | 'Function'
+    | 'Null'
+    | 'Undefined'
+    | 'Array'
+    | 'Date'
+    | 'Math'
+    | 'RegExp'
+    | 'Error'
+}

src/utils/cache.ts

@@ -0,0 +1,54 @@
+/**
+ *
+ * @param key 需要设置的key
+ * @param value 需要缓存的值
+ */
+export const useSetCache = <T>(
+  key: string,
+  value: T,
+  type: TCacheType = 'sessionStorage',
+) => {
+  type === 'localStorage'
+    ? window.localStorage.setItem(key, JSON.stringify(value))
+    : window.sessionStorage.setItem(key, JSON.stringify(value))
+}
+
+/**
+ *
+ * @param key 需要获取目标缓存的key
+ *
+ * @returns 所获取的缓存值
+ */
+export const useGetCache = (
+  key: string,
+  type: TCacheType = 'sessionStorage',
+) => {
+  let data =
+    type === 'localStorage'
+      ? window.localStorage.getItem(key)
+      : window.sessionStorage.getItem(key)
+
+  return Object.is(data, null) ? 'no' : JSON.parse(data as string)
+}
+
+/**
+ *
+ * @param key 需要删除的缓存值key
+ */
+export const useRemoveCache = (
+  key: string | 'all' | 'all-sessionStorage' | 'all-localStorage',
+  type: TCacheType = 'sessionStorage',
+) => {
+  if (key === 'all') {
+    window.window.localStorage.clear()
+    window.sessionStorage.clear()
+  } else if (key === 'all-sessionStorage') {
+    window.sessionStorage.clear()
+  } else if (key === 'all-localStorage') {
+    window.localStorage.clear()
+  } else {
+    type === 'localStorage'
+      ? window.localStorage.removeItem(key)
+      : window.sessionStorage.removeItem(key)
+  }
+}

src/utils/element.ts

@@ -0,0 +1,175 @@
+import { useValidteValueType } from '@use-utils/hook'
+
+/**
+ *
+ * @param el 父节点对象
+ * @param target 是否需要过滤，可按照数组或单个字符过滤
+ *
+ * @returns 目标节点下所有子节点
+ */
+export const useObtainElementChildNodes = (
+  el: HTMLElement,
+  target?: Array<string> | string,
+) => {
+  let nodes = Array.from(el.childNodes)
+
+  if (Array.isArray(target)) {
+    nodes = nodes.filter((el) => target.includes(el.nodeName))
+  } else {
+    if (target) {
+      nodes = nodes.filter((el) => el.nodeName === target)
+    }
+  }
+
+  return nodes
+}
+
+/**
+ *
+ * @param element Target element dom
+ * @param event 绑定事件类型
+ * @param handler 事件触发方法
+ *
+ * @handle 给元素绑定某个事件柄方法
+ */
+export const on = (
+  element: HTMLElement | Document | Window,
+  event: string,
+  handler: EventListenerOrEventListenerObject,
+  useCapture = false,
+) => {
+  if (element && event && handler) {
+    element.addEventListener(event, handler, useCapture)
+  }
+}
+
+/**
+ *
+ * @param element Target element dom
+ * @param event 卸载事件类型
+ * @param handler 所需卸载方法
+ *
+ * @handle 卸载元素上某个事件柄方法
+ */
+export const off = (
+  element: HTMLElement | Document | Window,
+  event: string,
+  handler: EventListenerOrEventListenerObject,
+  useCapture = false,
+) => {
+  if (element && event && handler) {
+    element.removeEventListener(event, handler, useCapture)
+  }
+}
+
+/**
+ *
+ * @param element Target element dom
+ * @param className 所需添加className，可：'xxx xxx' | 'xxx'格式添加
+ *
+ * @handle 添加元素className(可：'xxx xxx' | 'xxx'格式添加)
+ */
+export const addClass = (element: HTMLElement, className: string) => {
+  if (element) {
+    const classes = className.trim().split(' ')
+
+    classes.forEach((item) => {
+      if (item) {
+        element.classList.add(item)
+      }
+    })
+  }
+}
+
+/**
+ *
+ * @param element Target element dom
+ * @param className 所需删除className，可：'xxx xxx' | 'xxx'格式删除
+ *
+ * @handle 删除元素className(可：'xxx xxx' | 'xxx'格式删除)
+ */
+export const removeClass = (element: HTMLElement, className: string) => {
+  if (element) {
+    const classes = className.trim().split(' ')
+
+    classes.forEach((item) => {
+      if (item) {
+        element.classList.remove(item)
+      }
+    })
+  }
+}
+
+/**
+ *
+ * @param element Target element dom
+ * @param className 查询元素是否含有此className，可：'xxx xxx' | 'xxx'格式查询
+ *
+ * @returns 返回boolean
+ *
+ * @handle 元素是否含有某个className(可：'xxx xxx' | 'xxx'格式查询)
+ */
+export const hasClass = (element: HTMLElement, className: string) => {
+  const elementClassName = element.className
+
+  const classes = className
+    .trim()
+    .split(' ')
+    .filter((item: string) => item !== '')
+
+  return elementClassName.includes(classes.join(' '))
+}
+
+/**
+ *
+ * @param el Target element dom
+ * @param styles 所需绑定样式(如果为字符串，则必须以分号结尾每个行内样式描述)
+ */
+export const addStyle = (
+  el: HTMLElement,
+  styles: string | Partial<CSSStyleDeclaration>,
+) => {
+  if (el) {
+    if (useValidteValueType(styles, 'Object')) {
+      Object.keys(styles).forEach((item) => {
+        el.style[item] = styles[item]
+      })
+    } else if (useValidteValueType(styles, 'String')) {
+      ;(styles as string).split(';').forEach((item) => {
+        const [_k, _v] = item.split(':')
+
+        _k && _v && (el.style[_k.trim()] = _v.trim())
+      })
+    }
+  }
+}
+
+/**
+ *
+ * @param el Target element dom
+ * @param styles 所需卸载样式
+ */
+export const removeStyle = (el: HTMLElement, styles: string[]) => {
+  if (el) {
+    styles.forEach((item) => {
+      el.style[item] = null
+    })
+  }
+}
+
+/**
+ *
+ * @param element Target element dom
+ * @param styleProp Element style  properties
+ *
+ * @returns CSSStyleDeclaration
+ */
+export const useElementStyle = (element: HTMLElement, styleProp: string[]) => {
+  const styles = styleProp.reduce((_pre, _item) => {
+    _pre[_item] = element.style[_item]
+
+    return _pre
+  }, {} as CSSStyleDeclaration)
+
+  return styles
+}

src/utils/hook.ts

@@ -0,0 +1,41 @@
+/**
+ *
+ * @returns 获取当前项目环境
+ */
+export const useDetermineEnv = () => {
+  const env = import.meta.env
+
+  return env
+}
+
+/**
+ *
+ * @param data 二进制流数据
+ *
+ * @returns formate binary to base64 of the image
+ */
+export const useImagebufferToBase64 = (
+  data: ArrayBufferLike | ArrayLike<number>,
+) => {
+  const _base64 =
+    'data:image/png;base64,' +
+    window.btoa(
+      new Uint8Array(data).reduce(
+        (data, byte) => data + String.fromCharCode(byte),
+        '',
+      ),
+    )
+
+  return _base64
+}
+
+/**
+ *
+ * @param value 目标值
+ * @param type 类型
+ */
+export const useValidteValueType = <T>(value: T, type: ValidteValueType) => {
+  const _v = Object.prototype.toString.call(value)
+
+  return _v.includes(type)
+}

src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+/// <reference types="vue/macros-global" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM", "es5", "es6", "dom.iterable"],
+    "skipLibCheck": true,
+    "baseUrl": "./",
+    "paths": {
+      "@": ["src"],
+      "@/*": ["src/*"],
+      "@use-utils": ["src/utils"],
+      "@use-utils/*": ["src/utils/*"],
+      "@use-api": ["src/assets/api"],
+      "@use-api/*": ["src/utils/api/*"],
+      "@use-images": ["src/assets/images"],
+      "@use-images/*": ["src/utils/images"]
+    },
+    "suppressImplicitAnyIndexErrors": true,
+    "types": ["vite-plugin-svg-icons/client"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "src/*.ts",
+    "src/*.vue"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "vite-plugin/index.ts", "vite-plugin/type.ts"]
+}

vite-plugin/index.ts

@@ -0,0 +1,189 @@
+import path from 'node:path'
+
+import viteCompression from 'vite-plugin-compression' // 压缩打包
+import AutoImport from 'unplugin-auto-import/vite' // 自动导入
+import ViteComponents from 'unplugin-vue-components/vite' // 自动按需导入
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // svg图标
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' // i18n
+
+import type { ComponentResolver, TypeImport } from 'unplugin-vue-components'
+import type { VitePluginCompression, ViteBuildPlugin } from './type'
+import type { ImportsMap, PresetName } from 'unplugin-auto-import/types'
+import type { ServerOptions } from 'vite'
+
+/**
+ *
+ * @param options 别名
+ *
+ * 使用别名
+ */
+export const useAliasOptions = (
+  options?: { find: string; replacement: string }[],
+) => {
+  const alias = [
+    {
+      find: '@',
+      replacement: path.resolve(__dirname, '../src'),
+    },
+    {
+      find: '@use-utils',
+      replacement: path.resolve(__dirname, '../src/utils'),
+    },
+    {
+      find: '@use-api',
+      replacement: path.resolve(__dirname, '../src/assets/api'),
+    },
+    {
+      find: '@use-images',
+      replacement: path.resolve(__dirname, '../src/assets/images'),
+    },
+  ]
+
+  options?.forEach((curr) =>
+    alias.push({
+      find: curr.find,
+      replacement: path.resolve(__dirname, curr.replacement),
+    }),
+  )
+
+  return alias
+}
+
+/**
+ *
+ * @param imp 自动导入依赖
+ * @returns auto import plugin
+ *
+ * 自动导入
+ */
+export const useAutoImport = async (imp: (ImportsMap | PresetName)[] = []) =>
+  AutoImport({
+    include: [
+      /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+      /\.vue$/,
+      /\.vue\?vue/, // .vue
+      /\.md$/, // .md
+    ],
+    dts: true,
+    imports: ['vue', 'vue-router', 'pinia', '@vueuse/core', ...imp],
+  })
+
+/**
+ *
+ * @param resolvers 按需加载依赖项
+ * @param types 按需加载依赖类型
+ *
+ * 按需加载
+ */
+export const useViteComponents = async (
+  resolvers: (ComponentResolver | ComponentResolver[])[] = [],
+  types: TypeImport[] = [],
+) =>
+  ViteComponents({
+    dts: true,
+    resolvers: [...resolvers],
+    types: [
+      {
+        from: 'vue-router',
+        names: ['RouterLink', 'RouterView'],
+      },
+      ...types,
+    ],
+  })
+
+/**
+ *
+ * @param options
+ *
+ * 压缩打包
+ */
+export const useViteCompression = (options?: VitePluginCompression) =>
+  viteCompression(Object.assign(options ?? {}))
+
+/**
+ *
+ * 使用 svg 图标
+ */
+export const useCreateSvgIconsPlugin = () =>
+  createSvgIconsPlugin({
+    // 指定需要缓存的图标文件夹
+    iconDirs: [path.resolve(process.cwd(), 'src/icons')],
+    // 指定symbolId格式
+    symbolId: 'icon-[dir]-[name]',
+
+    /**
+     * 自定义插入位置
+     * @default: body-last
+     */
+    // inject?: 'body-last' | 'body-first'
+
+    /**
+     * custom dom id
+     * @default: __svg__icons__dom__
+     */
+    // customDomId: '__svg__icons__dom__',
+  })
+
+export const useVueI18nPlugin = () =>
+  VueI18nPlugin({
+    runtimeOnly: true,
+    compositionOnly: true,
+    include: [path.resolve(__dirname, '../src/language/**')],
+  })
+
+/**
+ *
+ * @param title 浏览器 title 名称
+ */
+export const useHTMLTitlePlugin = (title = 'ray template') => {
+  return {
+    name: 'html-transform',
+    transformIndexHtml: (html: string) => {
+      return html.replace(/<title>(.*?)<\/title>/, `<title>${title}</title>`)
+    },
+  }
+}
+
+/**
+ *
+ * @param options 自定义打包配置参数
+ */
+export const useViteBuildPlugin = (options?: ViteBuildPlugin) => {
+  const defaultPlugin = {
+    outDir: 'dist', // 打包后文件输出路径
+    assetsDir: 'assets', // 指定静态资源存放路径
+    assetsInlineLimit: 2048,
+    cssCodeSplit: true, // 拆分css代码
+    minify: 'esbuild', // 指定使用混淆器(terser|esbuild)
+    sourcemap: false,
+  }
+
+  return Object.assign(defaultPlugin, options)
+}
+
+/**
+ *
+ * @param options 自定义项目启动参数
+ */
+export const useViteServerPlugin = (options?: ServerOptions) => {
+  const server: ServerOptions = {
+    host: '0.0.0.0',
+    port: 9527,
+    open: false,
+    https: false,
+    strictPort: false,
+    fs: {
+      strict: false,
+      allow: [],
+    },
+    proxy: {
+      '/api': {
+        target: 'url',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  }
+
+  return Object.assign(server, options)
+}

vite-plugin/type.ts

@@ -0,0 +1,54 @@
+export interface VitePluginCompression {
+  /**
+   * Log compressed files and their compression ratios.
+   * @default: true
+   */
+  verbose?: boolean
+  /**
+   * Minimum file size before compression is used.
+   * @default 1025
+   */
+  threshold?: number
+  /**
+   * Filter files that do not need to be compressed
+   * @default /\.(js|mjs|json|css|html)$/i
+   */
+  filter?: RegExp | ((file: string) => boolean)
+  /**
+   * Whether to enable compression
+   * @default: false
+   */
+  disable?: boolean
+  /**
+   * Compression algorithm
+   * @default gzip
+   */
+  algorithm?: Algorithm
+  /**
+   * File format after compression
+   * @default .gz
+   */
+  ext?: string
+  /**
+   * Compression Options
+   */
+  compressionOptions?: {}
+  /**
+   * Delete the corresponding source file after compressing the file
+   * @default: false
+   */
+  deleteOriginFile?: boolean
+  /**
+   * success callback after completed
+   */
+  success?: () => void
+}
+
+export interface ViteBuildPlugin {
+  outDir: string
+  assetsDir: string
+  assetsInlineLimit: number
+  cssCodeSplit: boolean //拆分css代码
+  minify: boolean | 'esbuild' | 'terser'
+  sourcemap: boolean
+}

vite.config.ts

@@ -0,0 +1,57 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+import {
+  useAutoImport,
+  useViteComponents,
+  useAliasOptions,
+  useViteCompression,
+  useVueI18nPlugin,
+  useHTMLTitlePlugin,
+  useViteBuildPlugin,
+  useCreateSvgIconsPlugin,
+  useViteServerPlugin,
+} from './vite-plugin/index'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import ViteInspect from 'vite-plugin-inspect'
+
+// https://vitejs.dev/config/
+export default defineConfig(async () => {
+  return {
+    resolve: {
+      alias: useAliasOptions(),
+    },
+    plugins: [
+      vue({ reactivityTransform: true }),
+      vueJsx(),
+      await useAutoImport(),
+      await useViteComponents(),
+      useViteCompression(),
+      VueI18nPlugin(),
+      ViteInspect(), // 仅适用于开发模式(检查 Vite 插件的中间状态)
+      useVueI18nPlugin(),
+      useHTMLTitlePlugin(),
+      useCreateSvgIconsPlugin(),
+    ],
+    optimizeDeps: {
+      // include: ['vue', 'vue-router', 'pinia', 'vue-i18n'],
+    },
+    build: {
+      ...useViteBuildPlugin(),
+      rollupOptions: {
+        external: 'virtual:svg-icons-register',
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: '@import "./src/styles/mixins.scss";', // 全局mixin
+        },
+      },
+    },
+    server: {
+      ...useViteServerPlugin(),
+    },
+  }
+})