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

黄壮Z

已于 2023-02-28 10:53:35 修改

阅读量3.3k

点赞数 4

分类专栏： VUE3搭建文章标签： javascript vue.js 前端 typescript webpack

于 2022-12-16 11:20:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43618130/article/details/128338824

版权

VUE3搭建专栏收录该内容

7 篇文章

订阅专栏

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

unplugin-auto-import

1.下载

npm i unplugin-auto-import -save

2.配置

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

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

在configureWebpack.plugins中添加

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

因为是使用自动导入，所以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'//自动导入忽略
],

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

{
  "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
  }
}