refactor: 自动按需导入 vue 和 vue-router api

src/common/components/Notify/index.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { NotifyItem } from "./type"
 import { Bell } from "@element-plus/icons-vue"
-import { computed, ref } from "vue"
 import { messageData, notifyData, todoData } from "./data"
 import List from "./List.vue"
 

src/common/components/Screenfull/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import screenfull from "screenfull"
-import { computed, ref, watchEffect } from "vue"
 
 interface Props {
   /** 全屏的元素，默认是 html */

src/common/components/SearchMenu/Modal.vue

@@ -5,8 +5,6 @@ import { usePermissionStore } from "@/pinia/stores/permission"
 import { useDevice } from "@@/composables/useDevice"
 import { isExternal } from "@@/utils/validate"
 import { cloneDeep, debounce } from "lodash-es"
-import { computed, ref, shallowRef } from "vue"
-import { useRouter } from "vue-router"
 import Footer from "./Footer.vue"
 import Result from "./Result.vue"
 

src/common/components/SearchMenu/Result.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { RouteRecordName, RouteRecordRaw } from "vue-router"
-import { getCurrentInstance, onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue"
 
 interface Props {
   data: RouteRecordRaw[]

src/common/components/SearchMenu/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ref } from "vue"
 import Modal from "./Modal.vue"
 
 /** 控制 modal 显隐 */

src/common/components/SvgIcon/index.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed } from "vue"
-
 interface Props {
   prefix?: string
   name: string

src/common/composables/useDevice.ts

@@ -1,6 +1,5 @@
 import { useAppStore } from "@/pinia/stores/app"
 import { DeviceEnum } from "@@/constants/app-key"
-import { computed } from "vue"
 
 const appStore = useAppStore()
 

src/common/composables/useFetchSelect.ts

@@ -1,5 +1,3 @@
-import { onMounted, ref } from "vue"
-
 type OptionValue = string | number
 
 /** Select 需要的数据格式 */

src/common/composables/useGreyAndColorWeakness.ts

@@ -1,5 +1,4 @@
 import { useSettingsStore } from "@/pinia/stores/settings"
-import { watchEffect } from "vue"
 
 const GREY_MODE = "grey-mode"
 const COLOR_WEAKNESS = "color-weakness"

src/common/composables/useLayoutMode.ts

@@ -1,6 +1,5 @@
 import { useSettingsStore } from "@/pinia/stores/settings"
 import { LayoutModeEnum } from "@@/constants/app-key"
-import { computed } from "vue"
 
 const settingsStore = useSettingsStore()
 

src/common/composables/usePagination.ts

@@ -1,5 +1,3 @@
-import { reactive } from "vue"
-
 interface PaginationData {
   total?: number
   currentPage?: number

src/common/composables/useRouteListener.ts

@@ -1,6 +1,5 @@
 import type { RouteLocationNormalized } from "vue-router"
 import mitt, { type Handler } from "mitt"
-import { onBeforeUnmount } from "vue"
 
 /** 回调函数的类型 */
 type Callback = (route: RouteLocationNormalized) => void

src/common/composables/useTheme.ts

@@ -1,5 +1,4 @@
 import { getActiveThemeName, setActiveThemeName } from "@@/utils/cache/local-storage"
-import { ref, watchEffect } from "vue"
 
 const DEFAULT_THEME_NAME = "normal"
 

src/common/composables/useTitle.ts

@@ -1,5 +1,3 @@
-import { ref, watch } from "vue"
-
 /** 项目标题 */
 const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE ?? "V3 Admin Vite"
 

src/common/composables/useWatermark.ts

@@ -1,6 +1,5 @@
 import type { Ref } from "vue"
 import { debounce } from "lodash-es"
-import { onBeforeUnmount, ref } from "vue"
 
 /** 默认配置 */
 const DEFAULT_CONFIG = {

src/layouts/components/Breadcrumb/index.vue

@@ -2,8 +2,6 @@
 import type { RouteLocationMatched } from "vue-router"
 import { useRouteListener } from "@@/composables/useRouteListener"
 import { compile } from "path-to-regexp"
-import { ref } from "vue"
-import { useRoute, useRouter } from "vue-router"
 
 const route = useRoute()
 

src/layouts/components/NavigationBar/index.vue

@@ -10,7 +10,6 @@ import { useDevice } from "@@/composables/useDevice"
 import { useLayoutMode } from "@@/composables/useLayoutMode"
 import { UserFilled } from "@element-plus/icons-vue"
 import { storeToRefs } from "pinia"
-import { useRouter } from "vue-router"
 import { Breadcrumb, Hamburger, Sidebar } from "../index"
 
 const { isMobile } = useDevice()

src/layouts/components/RightPanel/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { Setting } from "@element-plus/icons-vue"
-import { ref } from "vue"
 
 interface Props {
   buttonTop?: number

src/layouts/components/Settings/index.vue

@@ -4,7 +4,6 @@ import { useLayoutMode } from "@@/composables/useLayoutMode"
 import { removeLayoutsConfig } from "@@/utils/cache/local-storage"
 import { Refresh } from "@element-plus/icons-vue"
 import { storeToRefs } from "pinia"
-import { watchEffect } from "vue"
 import SelectLayoutMode from "./SelectLayoutMode.vue"
 
 const { isLeft } = useLayoutMode()

src/layouts/components/Sidebar/Item.vue

@@ -2,7 +2,6 @@
 import type { RouteRecordRaw } from "vue-router"
 import { isExternal } from "@@/utils/validate"
 import path from "path-browserify"
-import { computed } from "vue"
 import Link from "./Link.vue"
 
 interface Props {

src/layouts/components/Sidebar/index.vue

@@ -5,8 +5,6 @@ import { useSettingsStore } from "@/pinia/stores/settings"
 import { useDevice } from "@@/composables/useDevice"
 import { useLayoutMode } from "@@/composables/useLayoutMode"
 import { getCssVar } from "@@/utils/css"
-import { computed } from "vue"
-import { useRoute } from "vue-router"
 import { Logo } from "../index"
 import Item from "./Item.vue"
 

src/layouts/components/TagsView/ScrollPane.vue

@@ -5,8 +5,6 @@ import { useSettingsStore } from "@/pinia/stores/settings"
 import Screenfull from "@@/components/Screenfull/index.vue"
 import { useRouteListener } from "@@/composables/useRouteListener"
 import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue"
-import { nextTick, ref } from "vue"
-import { useRoute } from "vue-router"
 
 interface Props {
   tagRefs: InstanceType<typeof RouterLink>[]

src/layouts/components/TagsView/index.vue

@@ -6,8 +6,6 @@ import { useTagsViewStore } from "@/pinia/stores/tags-view"
 import { useRouteListener } from "@@/composables/useRouteListener"
 import { Close } from "@element-plus/icons-vue"
 import path from "path-browserify"
-import { ref, watch } from "vue"
-import { useRoute, useRouter } from "vue-router"
 import ScrollPane from "./ScrollPane.vue"
 
 const router = useRouter()

src/layouts/composables/useResize.ts

@@ -1,7 +1,6 @@
 import { useAppStore } from "@/pinia/stores/app"
 import { useRouteListener } from "@@/composables/useRouteListener"
 import { DeviceEnum } from "@@/constants/app-key"
-import { onBeforeMount, onBeforeUnmount, onMounted } from "vue"
 
 /** 参考 Bootstrap 的响应式设计将最大移动端宽度设置为 992 */
 const MAX_MOBILE_WIDTH = 992

src/layouts/index.vue

@@ -5,7 +5,6 @@ import { useLayoutMode } from "@@/composables/useLayoutMode"
 import { useWatermark } from "@@/composables/useWatermark"
 import { getCssVar, setCssVar } from "@@/utils/css"
 import { storeToRefs } from "pinia"
-import { watchEffect } from "vue"
 import { RightPanel, Settings } from "./components"
 import { useResize } from "./composables/useResize"
 import LeftMode from "./modes/LeftMode.vue"

src/layouts/modes/LeftMode.vue

@@ -4,7 +4,6 @@ import { useSettingsStore } from "@/pinia/stores/settings"
 import { useDevice } from "@@/composables/useDevice"
 import { useLayoutMode } from "@@/composables/useLayoutMode"
 import { storeToRefs } from "pinia"
-import { computed } from "vue"
 import { AppMain, NavigationBar, Sidebar, TagsView } from "../components"
 
 const { isMobile } = useDevice()

src/layouts/modes/LeftTopMode.vue

@@ -2,7 +2,6 @@
 import { useAppStore } from "@/pinia/stores/app"
 import { useSettingsStore } from "@/pinia/stores/settings"
 import { storeToRefs } from "pinia"
-import { computed } from "vue"
 import { AppMain, Logo, NavigationBar, Sidebar, TagsView } from "../components"
 
 const appStore = useAppStore()

src/main.ts

@@ -1,7 +1,6 @@
 /* eslint-disable perfectionist/sort-imports */
 
 // core
-import { createApp } from "vue"
 import { pinia } from "@/pinia"
 import { router } from "@/router"
 import { installPlugins } from "@/plugins"

src/pages/demo/composable-demo/use-watermark.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useWatermark } from "@@/composables/useWatermark"
-import { ref } from "vue"
 
 const localRef = ref<HTMLElement | null>(null)
 const { setWatermark, clearWatermark } = useWatermark(localRef)

src/pages/demo/element-plus/index.vue

@@ -5,7 +5,6 @@ import { createTableDataApi, deleteTableDataApi, getTableDataApi, updateTableDat
 import { usePagination } from "@@/composables/usePagination"
 import { CirclePlus, Delete, Download, Refresh, RefreshRight, Search } from "@element-plus/icons-vue"
 import { cloneDeep } from "lodash-es"
-import { reactive, ref, watch } from "vue"
 
 defineOptions({
   // 命名当前组件

src/pages/demo/level2/level3/index.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ref } from "vue"
-
 defineOptions({
   name: "Level3"
 })

src/pages/demo/permission/components/SwitchRoles.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useUserStore } from "@/pinia/stores/user"
-import { ref, watch } from "vue"
 
 const userStore = useUserStore()
 

src/pages/demo/vxe-table/index.vue

@@ -3,7 +3,6 @@ import type { TableResponseData } from "@@/apis/table/type"
 import type { ElMessageBoxOptions } from "element-plus"
 import type { VxeFormInstance, VxeFormProps, VxeGridInstance, VxeGridProps, VxeModalInstance, VxeModalProps } from "vxe-table"
 import { deleteTableDataApi, getTableDataApi } from "@@/apis/table"
-import { nextTick, reactive, ref } from "vue"
 import { RoleColumnSolts } from "./tsx/RoleColumnSolts"
 import { StatusColumnSolts } from "./tsx/StatusColumnSolts"
 

src/pages/login/composables/useFocus.ts

@@ -1,5 +1,3 @@
-import { ref } from "vue"
-
 /** 焦点 Composable */
 export function useFocus() {
   // 是否有焦点

src/pages/login/index.vue

@@ -4,8 +4,6 @@ import type { LoginRequestData } from "./apis/type"
 import { useUserStore } from "@/pinia/stores/user"
 import ThemeSwitch from "@@/components/ThemeSwitch/index.vue"
 import { Key, Loading, Lock, Picture, User } from "@element-plus/icons-vue"
-import { reactive, ref } from "vue"
-import { useRouter } from "vue-router"
 import { getLoginCodeApi, loginApi } from "./apis"
 import Owl from "./components/Owl.vue"
 import { useFocus } from "./composables/useFocus"

src/pages/redirect/index.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { useRoute, useRouter } from "vue-router"
-
 const route = useRoute()
 const router = useRouter()
 

src/pinia/stores/app.ts

@@ -2,7 +2,6 @@ import { pinia } from "@/pinia"
 import { DeviceEnum, SIDEBAR_CLOSED, SIDEBAR_OPENED } from "@@/constants/app-key"
 import { getSidebarStatus, setSidebarStatus } from "@@/utils/cache/local-storage"
 import { defineStore } from "pinia"
-import { reactive, ref, watch } from "vue"
 
 interface Sidebar {
   opened: boolean

src/pinia/stores/permission.ts

@@ -4,7 +4,6 @@ import { constantRoutes, dynamicRoutes } from "@/router"
 import { routerConfig } from "@/router/config"
 import { flatMultiLevelRoutes } from "@/router/helper"
 import { defineStore } from "pinia"
-import { ref } from "vue"
 
 function hasPermission(roles: string[], route: RouteRecordRaw) {
   const routeRoles = route.meta?.roles

src/pinia/stores/settings.ts

@@ -4,7 +4,6 @@ import { layoutsConfig } from "@/layouts/config"
 import { pinia } from "@/pinia"
 import { setLayoutsConfig } from "@@/utils/cache/local-storage"
 import { defineStore } from "pinia"
-import { ref, watch } from "vue"
 
 type SettingsStore = {
   // 使用映射类型来遍历 LayoutsConfig 对象的键

src/pinia/stores/tags-view.ts

@@ -2,7 +2,6 @@ import type { RouteLocationNormalized } from "vue-router"
 import { pinia } from "@/pinia"
 import { getCachedViews, getVisitedViews, setCachedViews, setVisitedViews } from "@@/utils/cache/local-storage"
 import { defineStore } from "pinia"
-import { ref, watchEffect } from "vue"
 import { useSettingsStore } from "./settings"
 
 export type TagView = Partial<RouteLocationNormalized>

src/pinia/stores/user.ts

@@ -4,7 +4,6 @@ import { routerConfig } from "@/router/config"
 import { getUserInfoApi } from "@@/apis/user"
 import { setToken as _setToken, getToken, removeToken } from "@@/utils/cache/cookies"
 import { defineStore } from "pinia"
-import { ref } from "vue"
 import { useSettingsStore } from "./settings"
 import { useTagsViewStore } from "./tags-view"
 

types/auto/auto-imports.d.ts

@@ -6,8 +6,75 @@
 // biome-ignore lint: disable
 export {}
 declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
   const ElLoading: typeof import('element-plus/es')['ElLoading']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const ElNotification: typeof import('element-plus/es')['ElNotification']
+  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 onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  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 onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  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 useId: typeof import('vue')['useId']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  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, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }

vite.config.ts

@@ -101,11 +101,13 @@ export default defineConfig(({ mode }) => {
       }),
       // 原子化 CSS
       UnoCSS(),
-      // 自动按需导入
+      // 自动按需导入 API
       AutoImport({
+        imports: ["vue", "vue-router"],
         dts: "types/auto/auto-imports.d.ts",
         resolvers: [ElementPlusResolver()]
       }),
+      // 自动按需导入组件
       Components({
         dts: "types/auto/components.d.ts",
         resolvers: [ElementPlusResolver()]