位置: 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对象扩展运算符)

  • 战胜拖延症的秘笈(战胜拖延症的好处)

    战胜拖延症的秘笈(战胜拖延症的好处)

  • 淘宝SEO自然搜索排名中的变化趋势(淘宝自然搜索的排名机制)

    淘宝SEO自然搜索排名中的变化趋势(淘宝自然搜索的排名机制)

  • 美团订酒店怎么订(美团订酒店怎么代付)

    美团订酒店怎么订(美团订酒店怎么代付)

  • 苹果手机怎么下载大于100m(苹果手机怎么下载安卓app并安装)

    苹果手机怎么下载大于100m(苹果手机怎么下载安卓app并安装)

  • 微信发照片相册顺序乱了(微信发照片相册找不到怎么回事)

    微信发照片相册顺序乱了(微信发照片相册找不到怎么回事)

  • 带时间的蓝牙音响时间怎么调(带时间的蓝牙音响时间怎么设置闹铃)

    带时间的蓝牙音响时间怎么调(带时间的蓝牙音响时间怎么设置闹铃)

  • erp系统规划包括哪些环节(erp系统计划)

    erp系统规划包括哪些环节(erp系统计划)

  • 苹果4.7寸手机有哪些型号(苹果4.7寸手机有哪些)

    苹果4.7寸手机有哪些型号(苹果4.7寸手机有哪些)

  • 二手苹果无面容什么意思(二手苹果无面容能买吗)

    二手苹果无面容什么意思(二手苹果无面容能买吗)

  • ipad mini2可以升级到什么版本(ipad mini2可以升级到ios14吗)

    ipad mini2可以升级到什么版本(ipad mini2可以升级到ios14吗)

  • realme x是什么品牌(realme x系列)

    realme x是什么品牌(realme x系列)

  • boss直聘注销要几天(boss直聘注销能申请撤回吗)

    boss直聘注销要几天(boss直聘注销能申请撤回吗)

  • 华为电源键在哪里(华为手机电源键在哪里)

    华为电源键在哪里(华为手机电源键在哪里)

  • 键盘怎么打出小写字母(键盘怎么打出小数字)

    键盘怎么打出小写字母(键盘怎么打出小数字)

  • hdmi1无信号怎么办(hdmi1无信号怎么修)

    hdmi1无信号怎么办(hdmi1无信号怎么修)

  • 打印机驱动安装失败是什么原因(打印机驱动安装后如何添加打印机)

    打印机驱动安装失败是什么原因(打印机驱动安装后如何添加打印机)

  • 探探查看谁喜欢我为什么要付钱(探探怎么看谁喜欢你)

    探探查看谁喜欢我为什么要付钱(探探怎么看谁喜欢你)

  • x是什么时候上市的(x是什么时候学的)

    x是什么时候上市的(x是什么时候学的)

  • shirt是什么意思

    shirt是什么意思

  • 滴滴号被永久封号还可以注册(滴滴号被永久封禁要多少钱解封)

    滴滴号被永久封号还可以注册(滴滴号被永久封禁要多少钱解封)

  • gis在城市规划中的应用(gis在城市规划中的应用与情景)

    gis在城市规划中的应用(gis在城市规划中的应用与情景)

  • 苹果xr怎么查是不是国行(苹果xr怎么查是不是正品)

    苹果xr怎么查是不是国行(苹果xr怎么查是不是正品)

  • 王者荣耀进不去怎么办?原因是什么?(王者荣耀进不去怎么回事最新)

    王者荣耀进不去怎么办?原因是什么?(王者荣耀进不去怎么回事最新)

  • linux系统中sed命令怎么用? sed锁定某一行数据进行替换的技巧(linux的sed命令)

    linux系统中sed命令怎么用? sed锁定某一行数据进行替换的技巧(linux的sed命令)

  • 增值税核算办法
  • 怎么进行增值税纳税申报
  • 税控盘开票系统怎么升级
  • 增值税和附加税一共几个点
  • 出差补贴没有发票怎么做账
  • 小规模暂估入库的账务处理
  • 支付的工会经费现金流量项目是什么?
  • 卷烟批发环节消费税税率
  • 出售无形资产的净损失
  • 购进农产品取得3%专票怎样计算抵扣举例
  • 营改增后建筑业怎么开票
  • 用现金购买的股票
  • 非广告公司可以开广告费发票吗?
  • 公司销售二手车账务处理
  • 一般纳税人年审证明
  • 主营业务税金及附加包括印花税吗
  • 所得税费用什么时候结转到本年利润
  • 收购发票税率是什么意思
  • 小规模纳税人定额发票累计领用金额
  • 企业的应付账款确实无法支付,经确认后转作
  • 注册资本与注册资金的区别
  • 出口的货物因质量问题被扣款
  • 未缴少缴税款追征期
  • 机动车抵扣联是什么
  • ios路由设计
  • 如何关闭windows10自动更新
  • 白内障手术费用大概几天出院
  • 余款退回会计分录
  • 通行费发票可以抵扣吗
  • 员工用差旅费冲账怎么办
  • window11 正式版
  • 计提工资的时候是应发合计还是实发合计
  • 怎么样防止蹭wi-fi
  • 农行k宝企业网银无法登录
  • bp程序是什么
  • 在php中,字符串有哪些表示形式
  • macbookair邮件
  • php bcsub
  • layui表格编辑功能
  • ICCV, ECCV, CVPR,IEEE的关系
  • 页面白屏可能原因前端
  • 以摊余成本计量且其变动计入当期损益
  • 售后租回交易形式是什么
  • 进项加计抵减会计分录怎么做
  • 公益性捐赠递延注会
  • 以个人名义和公司名义入股的利弊
  • 税率变了
  • java 邮件
  • mongodb基础
  • erp用友u8操作教程
  • 如何注册小微商户
  • 送货单和收款收据的区别
  • 企业购入固定资产误计入管理费用
  • 待处理财产损益是什么类科目借贷方向
  • 费用报销票跨月可以用吗
  • 月初没报完税可以开发票吗
  • 期末留底的进项税怎么下账
  • 收到广告费分录
  • 收到保险公司赔偿款怎么入账
  • 建筑工程审计流程
  • 业务招待费税前列支
  • 农产品投入产出法怎么计算
  • 暂估收不到发票,怎么处理
  • 产品成本包括哪几个部分
  • 10万以下销售额怎么算
  • MySQL MEM_ROOT详解及实例代码
  • 怎么才能使牙齿变白
  • linux命令大全chm版
  • windowsxpdos命令
  • linux中ftp
  • cocos2d-x 3.2 在window平台vs2012下解决中文乱码问题
  • h5 nodejs
  • shell脚本自动化
  • 批处理杀死进程
  • Unity3D Vuforia Android 相机聚焦模式设置
  • jQuery插件开发
  • 商标注册图形查询
  • 江苏省电子税务局怎么添加办税人员
  • 契税减税、免税条件
  • 电子发票查询官方
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设