vue开发利器之unplugin-auto-import的使用
短信预约 -IT技能 免费直播动态提醒
1、unplugin-auto-import插件的解决的问题
unplugin-auto-import 这个插件是为了解决在开发中的导入问题，比如经常不清楚相对路径的问题，这个插件就是解决这个问题
这个插件会在根目录生成一个auto-import.d.ts，这个文件会将所有的插件导入到global中，这样在使用的时候直接就可以使用了
2、插件安装
在终端执行命令
npm i -D unplugin-auto-import
配置文件vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import AutoImport from "@vitejs/plugin-vue"
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports:["vue","vue-router"],
dts:'class="lazy" data-src/auto-import.d.ts' // 路径下自动生成文件夹存放全局指令
}),
],
})这样生成的auto-import.d.ts 在设置的目录下
// Generated by 'unplugin-auto-import'
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
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 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 resolveDirective: typeof import('vue')['resolveDirective']
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 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 useLink: typeof import('vue-router')['useLink']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
const watchPostEffect: typeof import('vue')['watchPostEffect']
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}可以看到基本上所有的可能使用的都生成出来了
注意：上面配置完毕dts后可能并不会自动生成auto-import.d.ts文件，可以重新运行一下项目，或者关闭编辑器重新打开运行即可。
3、测试
在使用的时候会有一个hook，检测到使用的对象是global，则直接导入
import Home from "../components/Home.vue";
import Page1 from "../components/Page1.vue";
import {createRouter, createWebHistory} from "vue-router";
import testAuto from "../components/TestAuto.vue";
const router = createRouter({
history: createWebHistory(),
routes :[
{path: "/home", component: Home},
{path: "/page1", component: Page1},
{path: "/page2", component: testAuto}
]
});
export default router;4、总结
作为一个刚刚入手的后端同学来说，这些插件还是不太熟悉
查了下d.ts的概念
d.ts大部分编辑器能识别d.ts文件，当你写js、ts代码的时候给你智能提示
.d.ts可以理解成API版本的代码， 只包含基本的类, 函数, 变量类型, 参数类型, 返回值等，用于给编译器以及IDE识别是否符合API定义类型，发布之后就可以看不到了。
补充：unplugin-auto-import 配置ESlint报错问题
自动导入的API导致ESlint警告
生成.eslintrc-auto-import.json文件
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
imports: ['vue', 'vue-router', 'pinia'],
eslintrc: {
enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
filepath: './.eslintrc-auto-import.json', // 生成json文件
globalsPropValue: true,
},
})
]
});
.eslintrc.js引入该文件
更新：生成的文件前有一个“·”，引入时忘记了。浪费时间排查
extends: [
'plugin:vue/vue3-essential',
'plugin:vue/vue3-recommended',
'plugin:vue/vue3-strongly-recommended',
'./.eslintrc-auto-import.json'
],
到此这篇关于vue开发利器之unplugin-auto-import使用的文章就介绍到这了,更多相关vue unplugin-auto-import使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
