位置: IT常识 - 正文

unplugin-auto-import的使用(unplugin-auto-import github)

编辑:rootadmin
unplugin-auto-import的使用 1、unplugin-auto-import插件的解决的问题

推荐整理分享unplugin-auto-import的使用(unplugin-auto-import github),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:unplugin-auto-import配置dirs,unplugin-auto-import配置dirs,unplugin-auto-import 动态组件问题,unplugin-auto-import 动态组件问题,unplugin-auto-import vue动态组件问题,unplugin-auto-import webpack,unplugin-auto-import webpack,unplugin-auto-import vue动态组件问题,内容如对您有帮助,希望把文章链接给更多的朋友!

unplugin-auto-import 这个插件是为了解决在开发中的导入问题,比如经常不清楚相对路径的问题,这个插件就是解决这个问题

这个插件会在根目录生成一个auto-import.d.ts,这个文件会将所有的插件导入到global中,这样在使用的时候直接就可以使用了

2、插件安装

在终端执行命令

npm i -D unplugin-auto-import

unplugin-auto-import的使用(unplugin-auto-import github)

配置文件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:'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定义类型,发布之后就可以看不到了。

本文链接地址:https://www.jiuchutong.com/zhishi/300306.html 转载请保留说明!

上一篇:计算机视觉项目-实时目标追踪(计算机视觉项目队友只让你打标签是什么意思)

下一篇:ES6--》对象扩展方法(es6对象扩展运算符)

  • 钉钉日志怎么写(前台钉钉日志怎么写)

    钉钉日志怎么写(前台钉钉日志怎么写)

  • word页眉横线如何去掉(word 页眉横线)

    word页眉横线如何去掉(word 页眉横线)

  • 苹果xs的64g够用吗

    苹果xs的64g够用吗

  • 微光为什么一直显示网络失败(微光为什么一直投屏失败)

    微光为什么一直显示网络失败(微光为什么一直投屏失败)

  • 苹果怎么购买超前点播(苹果手机怎么购买超级会员)

    苹果怎么购买超前点播(苹果手机怎么购买超级会员)

  • windows7sp1是什么(windows7旗舰版sp1是什么意思)

    windows7sp1是什么(windows7旗舰版sp1是什么意思)

  • ios微信缓存图片在哪(iphone微信缓存的照片从哪里找)

    ios微信缓存图片在哪(iphone微信缓存的照片从哪里找)

  • 性能模式对手机有损害吗(性能模式对手机有什么用)

    性能模式对手机有损害吗(性能模式对手机有什么用)

  • 台式苹果电脑如何开机(台式苹果电脑如何安装win10)

    台式苹果电脑如何开机(台式苹果电脑如何安装win10)

  • 微信怎么给好友发超过5分钟的视频(微信怎么给好友发软件)

    微信怎么给好友发超过5分钟的视频(微信怎么给好友发软件)

  • 笔记本电脑打开后不显示桌面黑屏(笔记本电脑打开软件总是弹出一个是或否)

    笔记本电脑打开后不显示桌面黑屏(笔记本电脑打开软件总是弹出一个是或否)

  • 手机gps定位不准怎么办(gps在手机哪个位置能找到)

    手机gps定位不准怎么办(gps在手机哪个位置能找到)

  • 电脑睡眠还会继续下载吗(电脑睡眠还会继续渲染吗)

    电脑睡眠还会继续下载吗(电脑睡眠还会继续渲染吗)

  • ipadpro10.5支持pd快充吗(ipadpro10.5支持多少w快充)

    ipadpro10.5支持pd快充吗(ipadpro10.5支持多少w快充)

  • imel1是什么意思(Imel1是什么意思)

    imel1是什么意思(Imel1是什么意思)

  • blackview是什么手机(blackswan是什么意思)

    blackview是什么手机(blackswan是什么意思)

  • 微信上买电影票能退吗(微信上买电影票怎么退票)

    微信上买电影票能退吗(微信上买电影票怎么退票)

  • 高德用的北斗还是gps(高德地图使用的是北斗)

    高德用的北斗还是gps(高德地图使用的是北斗)

  • vivo手机怎么把字体变大(vivo手机怎么把旧手机传到新手机)

    vivo手机怎么把字体变大(vivo手机怎么把旧手机传到新手机)

  • 华为nova5z像素是多少(华为nova5i手机像素)

    华为nova5z像素是多少(华为nova5i手机像素)

  • 荣耀20s和荣耀20pro对比(荣耀20s和荣耀20pro的区别)

    荣耀20s和荣耀20pro对比(荣耀20s和荣耀20pro的区别)

  • 为什么快手有时候会闪退(为什么快手有时候收不到消息)

    为什么快手有时候会闪退(为什么快手有时候收不到消息)

  • 积目怎么注销账号(积目怎么注销账号2021)

    积目怎么注销账号(积目怎么注销账号2021)

  • 8p是多少寸屏幕(iphone 8p是多少寸)

    8p是多少寸屏幕(iphone 8p是多少寸)

  • mp2h2ch/a是ipad几(mp2g2ch/a是ipad几)

    mp2h2ch/a是ipad几(mp2g2ch/a是ipad几)

  • 快手长图封面两张照片怎么做(快手长图封面怎么弄两张照片)

    快手长图封面两张照片怎么做(快手长图封面怎么弄两张照片)

  • 乐视手机怎么散热快(乐视手机怎么散热的)

    乐视手机怎么散热快(乐视手机怎么散热的)

  • 当月出口的货物,可以过几个月申报吗
  • 分销佣金税务处理
  • 一次性收取加盟费 所得税
  • 税金及附加和应交税费的关系
  • 金融业的企业
  • 红字发票怎么勾选认证
  • 补去年收入的会计分录
  • 不开票收入需要什么票据吗
  • 7.1发票没有税号怎么开
  • 机票退票手续费为什么这么贵
  • 从财务报表中可以了解企业的哪些信息?作用是什么?
  • 外币折算差额怎么记账
  • 费用的补提利息怎么计算
  • 电子发票抬头打印怎么弄
  • 企业注销后注册资金取出需要交税吗
  • 押金算不算房租
  • win7旗舰版分辨率调高了黑屏怎么办
  • 微信支付被限制是怎么回事
  • 银河麒麟操作系统价格
  • vue项目管理器
  • threejs环境搭建
  • 花卉绿萝的养殖方法
  • 固定资产多少可以费用化
  • 其他应收个人贷方余额表示什么意思
  • 外贸出口退税进项发票勾选
  • phpstudy8
  • 建筑企业取得发票难
  • 合并报表内部交易顺流逆流
  • 脱不下孔乙己的长衫对应下一句
  • 金蝶软件做帐流程
  • 职工医保报销后病情会泄露给单位吗
  • 本年利润弥补以前年度亏损分录
  • 行政事业单位支出劳务费规定
  • 公司注销后如何追缴税款
  • sql服务器无法启动的解决
  • 无形资产摊销一经确认不得转回
  • 公司维修费计入什么科目
  • 研发支出如何做账
  • 销售商品的运费的税费计入进项税额
  • 如何填写社会保障卡信息
  • 取得虚开
  • 零余额账户对账余额调节表
  • 政府补贴是否交增值税
  • 注销股本对所有股票影响
  • 餐饮怎么扣税
  • 绿化补偿标准
  • 转出未交增值税借方余额表示什么
  • 什么是权责发生会计处理基础
  • 深入分析换一种说法
  • mysql如何导出数据
  • pg 正则表达式
  • 安装软件提示windows 无法访问指定设备,路径或文件
  • centos6.10修改主机名
  • win7系统u盘打不开怎么办
  • mac如何整理桌面图标
  • os x10.12支持的机型
  • openoffice使用
  • seti@home.exe - seti@home是什么进程 有什么用
  • manager是啥
  • window10外接摄像头怎么启用
  • 关闭windows游戏
  • ie等级
  • ubuntu用root运行
  • dos命令批处理
  • perl 字符串处理
  • xml文件示例
  • chrome heat
  • jq filter过滤
  • unity3d文件怎么查看和修改
  • python2设置环境变量
  • 发票代码如何查询公司
  • 国家税务局网上江苏电子税务局官网
  • 销售黄金饰品
  • 纳税信用等级在哪里查
  • 南通国税电子税务局
  • 河南税务申报
  • 发货确认收入还是以开票确认收入
  • 实名办税有什么作用
  • 已经开票的房子还能退吗
  • 两利四率完成情况
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设