【插件推荐】vue3自动导入unplugin-auto-import_unplugin-auto-import/webpack

今天给大家推荐一个组件，《unplugin-auto-import》它可以把vue3中的方法自动引入，不用大家每个js，ts文件都需要去引入vue3相关方法，支持TypeScript

unplugin-auto-import

1.下载

npm i unplugin-auto-import -save
1

2.配置

我这里用的是Vue CLI，所以要在vue.config.js文件中添加配置，官网中有写不同打包工具的配置写法
引入：

// 自动按需加载
const AutoImport = require('unplugin-auto-import/webpack')
1
2

在configureWebpack.plugins中添加

// 自动按需加载
AutoImport({
  imports: ['vue', 'vue-router', 'vuex'],
  eslintrc: {
    enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
    filepath: './.eslintrc-auto-import.json', // 生成json文件,eslintrc中引入
    globalsPropValue: true,
  },
}),
1
2
3
4
5
6
7
8
9

因为是使用自动导入，所以js文件中我们不需要导入，但是eslint会检测到报错，第一次启动的时候把eslintrc.enabled设置为true，会在项目根目录生成一个eslintrc-auto-import.json文件，我们需要把他在eslint配置文件中引入一下
.eslintrc.js文件中：

extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/prettier',
	'./.eslintrc-auto-import.json'//自动导入忽略
],
1
2
3
4
5
6

这些使用的时候就不用导入了

{
  "globals": {
    "EffectScope": true,
    "computed": true,
    "createApp": true,
    "createLogger": true,
    "createNamespacedHelpers": true,
    "createStore": true,
    "customRef": true,
    "defineAsyncComponent": true,
    "defineComponent": true,
    "effectScope": true,
    "getCurrentInstance": true,
    "getCurrentScope": true,
    "h": true,
    "inject": true,
    "isProxy": true,
    "isReactive": true,
    "isReadonly": true,
    "isRef": true,
    "mapActions": true,
    "mapGetters": true,
    "mapMutations": true,
    "mapState": true,
    "markRaw": true,
    "nextTick": true,
    "onActivated": true,
    "onBeforeMount": true,
    "onBeforeRouteLeave": true,
    "onBeforeRouteUpdate": true,
    "onBeforeUnmount": true,
    "onBeforeUpdate": true,
    "onDeactivated": true,
    "onErrorCaptured": true,
    "onMounted": true,
    "onRenderTracked": true,
    "onRenderTriggered": true,
    "onScopeDispose": true,
    "onServerPrefetch": true,
    "onUnmounted": true,
    "onUpdated": true,
    "provide": true,
    "reactive": true,
    "readonly": true,
    "ref": true,
    "resolveComponent": true,
    "resolveDirective": true,
    "shallowReactive": true,
    "shallowReadonly": true,
    "shallowRef": true,
    "toRaw": true,
    "toRef": true,
    "toRefs": true,
    "triggerRef": true,
    "unref": true,
    "useAttrs": true,
    "useCssModule": true,
    "useCssVars": true,
    "useLink": true,
    "useRoute": true,
    "useRouter": true,
    "useSlots": true,
    "useStore": true,
    "watch": true,
    "watchEffect": true,
    "watchPostEffect": true,
    "watchSyncEffect": true
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69