引入 unplugin-auto-import 依赖，修改框架部分代码

.eslintrc.js

@@ -14,7 +14,8 @@ module.exports = {
     extends: [
         'plugin:vue/vue3-recommended',
         'plugin:vue/vue3-strongly-recommended',
-        'eslint:recommended'
+        'eslint:recommended',
+        './auto-import-eslint-config.js'
     ],
     parser: 'vue-eslint-parser',
     rules: {

.gitignore

@@ -4,3 +4,4 @@ dist*
 dist-ssr
 *.local
 src/assets/sprites/*.*
+auto-imports.d.ts

auto-import-eslint-config.js

@@ -0,0 +1,53 @@
+module.exports = {
+    globals: {
+        // lifecycle
+        onActivated: 'readonly',
+        onBeforeMount: 'readonly',
+        onBeforeUnmount: 'readonly',
+        onBeforeUpdate: 'readonly',
+        onDeactivated: 'readonly',
+        onErrorCaptured: 'readonly',
+        onMounted: 'readonly',
+        onServerPrefetch: 'readonly',
+        onUnmounted: 'readonly',
+        onUpdated: 'readonly',
+        // reactivity
+        computed: 'readonly',
+        customRef: 'readonly',
+        isReadonly: 'readonly',
+        isRef: 'readonly',
+        markRaw: 'readonly',
+        reactive: 'readonly',
+        readonly: 'readonly',
+        ref: 'readonly',
+        shallowReactive: 'readonly',
+        shallowReadonly: 'readonly',
+        shallowRef: 'readonly',
+        toRaw: 'readonly',
+        toRef: 'readonly',
+        toRefs: 'readonly',
+        triggerRef: 'readonly',
+        unref: 'readonly',
+        watch: 'readonly',
+        watchEffect: 'readonly',
+        // component
+        defineComponent: 'readonly',
+        defineAsyncComponent: 'readonly',
+        getCurrentInstance: 'readonly',
+        h: 'readonly',
+        inject: 'readonly',
+        nextTick: 'readonly',
+        provide: 'readonly',
+        useCssModule: 'readonly',
+        // other
+        defineProps: 'readonly',
+        defineEmits: 'readonly',
+        defineExpose: 'readonly',
+        withDefaults: 'readonly',
+        // vue-router
+        useRoute: 'readonly',
+        useRouter: 'readonly',
+        // vuex
+        useStore: 'readonly'
+    }
+}

package.json

@@ -48,6 +48,7 @@
         "stylelint-config-standard": "^22.0.0",
         "stylelint-scss": "^3.20.1",
         "svgo": "^2.5.0",
+        "unplugin-auto-import": "^0.4.5",
         "unplugin-vue-components": "^0.14.11",
         "vite": "^2.5.3",
         "vite-plugin-banner": "^0.1.3",

pnpm-lock.yaml

@@ -28,6 +28,7 @@ specifiers:
   stylelint-scss: ^3.20.1
   svgo: ^2.5.0
   tinymce: ^5.9.1
+  unplugin-auto-import: ^0.4.5
   unplugin-vue-components: ^0.14.11
   vite: ^2.5.3
   vite-plugin-banner: ^0.1.3
@@ -75,6 +76,7 @@ devDependencies:
   stylelint-config-standard: registry.nlark.com/stylelint-config-standard/22.0.0_stylelint@13.13.1
   stylelint-scss: registry.nlark.com/stylelint-scss/3.20.1_stylelint@13.13.1
   svgo: registry.nlark.com/svgo/2.5.0
+  unplugin-auto-import: registry.nlark.com/unplugin-auto-import/0.4.5_vite@2.5.3
   unplugin-vue-components: registry.nlark.com/unplugin-vue-components/0.14.11_vite@2.5.3+vue@3.2.8
   vite: registry.nlark.com/vite/2.5.3
   vite-plugin-banner: registry.nlark.com/vite-plugin-banner/0.1.3
@@ -2546,7 +2548,7 @@ packages:
     dev: true
 
   /resolve/1.20.0:
-    resolution: {integrity: sha1-YpoBP7P3B1XW8LeTXMHCxTeLGXU=, tarball: resolve/download/resolve-1.20.0.tgz?cache=0&sync_timestamp=1613098300584&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.20.0.tgz}
+    resolution: {integrity: sha1-YpoBP7P3B1XW8LeTXMHCxTeLGXU=, tarball: resolve/download/resolve-1.20.0.tgz}
     dependencies:
       is-core-module: registry.nlark.com/is-core-module/2.6.0
       path-parse: registry.nlark.com/path-parse/1.0.7
@@ -3068,11 +3070,6 @@ packages:
       isobject: 3.0.1
     dev: true
 
-  /upath/2.0.1:
-    resolution: {integrity: sha1-UMc96mjW9rmQ9R0nnOYIFmXWGos=, tarball: upath/download/upath-2.0.1.tgz}
-    engines: {node: '>=4'}
-    dev: true
-
   /upper-case-first/1.1.2:
     resolution: {integrity: sha1-XXm+3P8UQZUY/S7bCgUHybaFkRU=, tarball: upper-case-first/download/upper-case-first-1.1.2.tgz}
     dependencies:
@@ -3233,6 +3230,14 @@ packages:
     resolution: {integrity: sha1-0R1zgf/tFrdC9q97PyI9XNn+mSA=, tarball: zwitch/download/zwitch-1.0.5.tgz}
     dev: true
 
+  registry.nlark.com/@antfu/utils/0.3.0:
+    resolution: {integrity: sha1-YwbEO1Kog72Olz4+2N1kJIQYvMQ=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@antfu/utils/download/@antfu/utils-0.3.0.tgz}
+    name: '@antfu/utils'
+    version: 0.3.0
+    dependencies:
+      '@types/throttle-debounce': registry.nlark.com/@types/throttle-debounce/2.1.0
+    dev: true
+
   registry.nlark.com/@babel/code-frame/7.12.11:
     resolution: {integrity: sha1-9K1DWqJj25NbjxDyxVLSP7cWpj8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@babel/code-frame/download/@babel/code-frame-7.12.11.tgz}
     name: '@babel/code-frame'
@@ -3756,6 +3761,12 @@ packages:
       '@types/node': registry.nlark.com/@types/node/16.7.10
     dev: true
 
+  registry.nlark.com/@types/throttle-debounce/2.1.0:
+    resolution: {integrity: sha1-HD32JL/Eti+ZLTASuExW1B6rN3Y=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/throttle-debounce/download/@types/throttle-debounce-2.1.0.tgz}
+    name: '@types/throttle-debounce'
+    version: 2.1.0
+    dev: true
+
   registry.nlark.com/@types/through/0.0.30:
     resolution: {integrity: sha1-4OQs536Je9aurW9upirrE1uKOJU=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/@types/through/download/@types/through-0.0.30.tgz?cache=0&sync_timestamp=1629710122580&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fthrough%2Fdownload%2F%40types%2Fthrough-0.0.30.tgz}
     name: '@types/through'
@@ -4712,6 +4723,12 @@ packages:
     dev: true
     optional: true
 
+  registry.nlark.com/function-bind/1.1.1:
+    resolution: {integrity: sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/function-bind/download/function-bind-1.1.1.tgz}
+    name: function-bind
+    version: 1.1.1
+    dev: true
+
   registry.nlark.com/get-pixels/3.3.3:
     resolution: {integrity: sha1-ceLf1L77gQtUeKYcY1SACXbOAcc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/get-pixels/download/get-pixels-3.3.3.tgz}
     name: get-pixels
@@ -4865,6 +4882,15 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  registry.nlark.com/has/1.0.3:
+    resolution: {integrity: sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/has/download/has-1.0.3.tgz}
+    name: has
+    version: 1.0.3
+    engines: {node: '>= 0.4.0'}
+    dependencies:
+      function-bind: registry.nlark.com/function-bind/1.1.1
+    dev: true
+
   registry.nlark.com/he/1.2.0:
     resolution: {integrity: sha1-hK5l+n6vsWX922FWauFLrwVmTw8=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/he/download/he-1.2.0.tgz}
     name: he
@@ -4999,11 +5025,11 @@ packages:
     dev: true
 
   registry.nlark.com/is-core-module/2.6.0:
-    resolution: {integrity: sha1-11U7JSb+Wbkro+QMjfdX7Ipwnhk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/is-core-module/download/is-core-module-2.6.0.tgz}
+    resolution: {integrity: sha1-11U7JSb+Wbkro+QMjfdX7Ipwnhk=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/is-core-module/download/is-core-module-2.6.0.tgz?cache=0&sync_timestamp=1629224905008&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fis-core-module%2Fdownload%2Fis-core-module-2.6.0.tgz}
     name: is-core-module
     version: 2.6.0
     dependencies:
-      has: 1.0.3
+      has: registry.nlark.com/has/1.0.3
     dev: true
 
   registry.nlark.com/is-data-descriptor/0.1.4:
@@ -5435,7 +5461,7 @@ packages:
     dev: true
 
   registry.nlark.com/picomatch/2.3.0:
-    resolution: {integrity: sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz}
+    resolution: {integrity: sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz?cache=0&sync_timestamp=1621648246651&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpicomatch%2Fdownload%2Fpicomatch-2.3.0.tgz}
     name: picomatch
     version: 2.3.0
     engines: {node: '>=8.6'}
@@ -6202,6 +6228,27 @@ packages:
     version: 4.1.0
     dev: true
 
+  registry.nlark.com/unplugin-auto-import/0.4.5_vite@2.5.3:
+    resolution: {integrity: sha1-JVpSgT8+955Xdb5jD5X2Znz0qFA=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/unplugin-auto-import/download/unplugin-auto-import-0.4.5.tgz}
+    id: registry.nlark.com/unplugin-auto-import/0.4.5
+    name: unplugin-auto-import
+    version: 0.4.5
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@vueuse/core': ^6.0.0
+    dependencies:
+      '@antfu/utils': registry.nlark.com/@antfu/utils/0.3.0
+      '@rollup/pluginutils': registry.nlark.com/@rollup/pluginutils/4.1.1
+      has-pkg: registry.nlark.com/has-pkg/0.0.1
+      magic-string: 0.25.7
+      resolve: 1.20.0
+      unplugin: registry.nlark.com/unplugin/0.2.7_vite@2.5.3
+    transitivePeerDependencies:
+      - rollup
+      - vite
+      - webpack
+    dev: true
+
   registry.nlark.com/unplugin-vue-components/0.14.11_vite@2.5.3+vue@3.2.8:
     resolution: {integrity: sha1-rvLASAMW6GRFDLPgt/Y+jxBpUCc=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/unplugin-vue-components/download/unplugin-vue-components-0.14.11.tgz}
     id: registry.nlark.com/unplugin-vue-components/0.14.11
@@ -6235,19 +6282,19 @@ packages:
       rollup: ^2.50.0
       vite: ^2.3.0
       webpack: ^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
     dependencies:
-      upath: 2.0.1
+      upath: registry.nlark.com/upath/2.0.1
       vite: registry.nlark.com/vite/2.5.3
       webpack-virtual-modules: registry.nlark.com/webpack-virtual-modules/0.4.3
     dev: true
 
+  registry.nlark.com/upath/2.0.1:
+    resolution: {integrity: sha1-UMc96mjW9rmQ9R0nnOYIFmXWGos=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/upath/download/upath-2.0.1.tgz}
+    name: upath
+    version: 2.0.1
+    engines: {node: '>=4'}
+    dev: true
+
   registry.nlark.com/uuid/3.4.0:
     resolution: {integrity: sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1622213308116&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz}
     name: uuid

src/App.vue

@@ -3,9 +3,6 @@
 </template>
 
 <script setup>
-import { watch, onMounted } from 'vue'
-import { useStore } from 'vuex'
-
 const store = useStore()
 
 watch(() => store.state.settings.mode, () => {

src/components/Auth/index.vue

@@ -7,7 +7,6 @@
 
 <script setup>
 import { auth } from '@/util'
-import { defineProps } from 'vue'
 
 const props = defineProps({
     value: {

src/components/AuthAll/index.vue

@@ -7,7 +7,6 @@
 
 <script setup>
 import { authAll } from '@/util'
-import { defineProps } from 'vue'
 
 const props = defineProps({
     value: {

src/components/BatchActionBar/index.vue

@@ -9,8 +9,6 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, computed } from 'vue'
-
 const props = defineProps({
     data: {
         type: Array,

src/components/CascaderArea/index.vue

@@ -6,7 +6,6 @@
 
 <script setup>
 import area from '@/util/area'
-import { defineProps, defineEmits, ref, computed } from 'vue'
 
 const props = defineProps({
     // 传入数据为中文数组，例如：['河北省', '唐山市', '市辖区']

src/components/Editor/index.vue

@@ -28,8 +28,6 @@ import 'tinymce/plugins/wordcount'
 import 'tinymce/plugins/code'
 import 'tinymce/plugins/searchreplace'
 
-import { defineProps, defineEmits, ref, computed, watch, onMounted } from 'vue'
-
 const props = defineProps({
     modelValue: {
         type: String,

src/components/FileUpload/index.vue

@@ -25,8 +25,6 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, getCurrentInstance } from 'vue'
-
 const { proxy } = getCurrentInstance()
 
 const props = defineProps({

src/components/FixedActionBar/index.vue

@@ -5,8 +5,6 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-
 const data = ref({
     isBottom: true
 })

src/components/ImagePreview/index.vue

@@ -9,8 +9,6 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue'
-
 const props = defineProps({
     src: {
         type: String,

src/components/ImageUpload/index.vue

@@ -46,8 +46,6 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, getCurrentInstance } from 'vue'
-
 const { proxy } = getCurrentInstance()
 
 const props = defineProps({

src/components/ImagesUpload/index.vue

@@ -50,8 +50,6 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, getCurrentInstance } from 'vue'
-
 const { proxy } = getCurrentInstance()
 
 const props = defineProps({

src/components/PageHeader/index.vue

@@ -13,8 +13,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
-
 defineProps({
     title: {
         type: String,

src/components/PageMain/index.vue

@@ -15,8 +15,6 @@
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue'
-
 const props = defineProps({
     title: {
         type: String,

src/components/Result/index.vue

@@ -21,8 +21,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
-
 defineProps({
     type: {
         type: String,

src/components/SearchBar/index.vue

@@ -8,8 +8,6 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, watch } from 'vue'
-
 const props = defineProps({
     showMore: {
         type: Boolean,

src/components/SvgIcon/index.vue

@@ -6,8 +6,6 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue'
-
 const props = defineProps({
     name: {
         type: String,

src/components/Trend/index.vue

@@ -8,8 +8,6 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue'
-
 const props = defineProps({
     value: {
         type: String,

src/layout/components/BuyIt/index.vue

@@ -24,8 +24,6 @@
 </template>
 
 <script setup>
-import { getCurrentInstance, onMounted, ref } from 'vue'
-
 const { proxy } = getCurrentInstance()
 
 const locationOrigin = ref(location.href)

src/layout/components/Header/index.vue

@@ -23,7 +23,6 @@
 <script setup>
 import Logo from '../Logo/index.vue'
 import UserMenu from '../UserMenu/index.vue'
-import { inject } from 'vue'
 
 const switchMenu = inject('switchMenu')
 </script>

src/layout/components/Logo/index.vue

@@ -7,8 +7,6 @@
 
 <script setup>
 import imgLogo from '@/assets/images/logo.png'
-import { defineProps, ref, computed } from 'vue'
-import { useStore } from 'vuex'
 
 const store = useStore()
 

src/layout/components/MainSidebar/index.vue

@@ -21,7 +21,6 @@
 
 <script setup>
 import Logo from '../Logo/index.vue'
-import { inject } from 'vue'
 
 const switchMenu = inject('switchMenu')
 </script>

src/layout/components/Search/index.vue

@@ -51,8 +51,6 @@
 
 <script setup>
 import { deepClone } from '@/util'
-import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
-import { useStore } from 'vuex'
 
 const { proxy } = getCurrentInstance()
 const store = useStore()

src/layout/components/SidebarItem/index.vue

@@ -29,7 +29,6 @@
 <script setup>
 import SidebarItem from './index.vue'
 import path from 'path-browserify'
-import { computed, defineProps } from 'vue'
 
 const props = defineProps({
     item: {

src/layout/components/SubSidebar/index.vue

@@ -23,7 +23,6 @@
 <script setup>
 import Logo from '../Logo/index.vue'
 import SidebarItem from '../SidebarItem/index.vue'
-import { ref } from 'vue'
 
 const sidebarScrollTop = ref(0)
 

src/layout/components/ThemeSetting/index.vue

@@ -140,10 +140,6 @@
 </template>
 
 <script setup>
-import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
-
 const { proxy } = getCurrentInstance()
 const store = useStore()
 const route = useRoute()

src/layout/components/Topbar/index.vue

@@ -29,9 +29,6 @@
 import { compile } from 'path-to-regexp'
 import { deepClone } from '@/util'
 import UserMenu from '../UserMenu/index.vue'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
 
 const store = useStore()
 const route = useRoute()

src/layout/components/UserMenu/index.vue

@@ -39,9 +39,6 @@
 
 <script setup>
 import screenfull from 'screenfull'
-import { computed, inject, onBeforeUnmount, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
-import { useRouter } from 'vue-router'
 
 const reload = inject('reload')
 const store = useStore()

src/layout/index.vue

@@ -39,10 +39,6 @@ import Search from './components/Search/index.vue'
 import ThemeSetting from './components/ThemeSetting/index.vue'
 import BuyIt from './components/BuyIt/index.vue'
 
-import { provide, computed, watch, getCurrentInstance, onMounted } from 'vue'
-import { useStore } from 'vuex'
-import { useRoute, useRouter } from 'vue-router'
-
 const { proxy } = getCurrentInstance()
 const store = useStore()
 const route = useRoute(), router = useRouter()

vite/plugins/auto-import.js

@@ -0,0 +1,13 @@
+import autoImport from 'unplugin-auto-import/vite'
+
+export default function createAutoImport() {
+    return autoImport({
+        imports: [
+            'vue',
+            'vue-router',
+            {
+                'vuex': ['useStore']
+            }
+        ]
+    })
+}

vite/plugins/index.js

@@ -2,6 +2,7 @@ import vue from '@vitejs/plugin-vue'
 
 import createRestart from './restart'
 import createHtml from './html'
+import createAutoImport from './auto-import'
 import createComponents from './components'
 import createSvgIcon from './svg-icon'
 import createMock from './mock'
@@ -13,6 +14,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
     const vitePlugins = [vue()]
     !isBuild && vitePlugins.push(createRestart())
     vitePlugins.push(createHtml(viteEnv, isBuild))
+    vitePlugins.push(createAutoImport())
     vitePlugins.push(createComponents())
     vitePlugins.push(createSvgIcon(isBuild))
     vitePlugins.push(createMock())