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

  • 增值税退税如何做账
  • 预收账款可以挂多久
  • 收到原材料发票的会计分录
  • 年末为什么要结转应付现金股利
  • 企业注销增值税留抵可以退吗
  • 企业所得税完税证明怎么打印
  • 租赁负债的计量
  • 按月按季申报
  • 开具红字增值税专用发票是什么意思
  • 技术成果投资入股企业所得税递延纳税备案表
  • 企业向个人借款需要交印花税吗
  • 机动车发票申请流程
  • 电子发票报销后还能冲红么
  • 外币应收帐款汇兑损益现流附表
  • 收到汇票的账务处理
  • 专用发票丢失如何报销
  • 高铁票可以要发票吗
  • 去年红字发票怎么做账
  • 营养成分表的计算表
  • 企业收到银行利息收入2000元会计分录
  • 不能抵扣的进项发票怎么做分录
  • 出口转内销申报需要先做出口退税吗
  • 在win7系统中安装win10
  • mysql输入中文显示乱码
  • 发票失控进项转出所得税
  • 商业折扣影响税费吗
  • newsupd.exe - newsupd是什么进程 有什么用
  • thinkphp ide
  • 生产储存剧毒化学品的单位应当设置
  • 最贵的苹果电脑99万
  • 纳税人提供应税服务
  • 福利费可以抵扣进项吗?
  • 个体经营所得税申报表a
  • 详解16型人格
  • centos安装epel
  • 资产减值损失的借贷方向
  • 净收入是营业收入吗
  • 上个月开的发票这个月作废怎么做帐
  • 英文好书推荐
  • 四舍五入产生的原理
  • 织梦cms怎么样
  • 买新车检测费
  • 现金流量表里支付的各项税费包括什么
  • 增值税的账务处理怎么做
  • 出口企业消费税怎么算
  • 预付检测费未收到发票
  • 季节性停工固定资产折旧计入什么科目
  • 企业购入投资性房地产
  • 无偿使用期限
  • 暂估入账是什么意思
  • 小规模纳税人的增值税计入成本吗
  • 购入自用的机器怎么入账
  • 付款与开票单位不一致怎样做账
  • 职工教育经费可以结转几年继续抵扣吗
  • 小企业的建账流程
  • sql server 3417错误
  • sql语句编译执行过程
  • insert into tbl() select * from tb2中加入多个条件
  • win7硬盘设置在哪里设置
  • win10系统开机密码设置方法
  • xp创建VPN连接图文教程
  • centos7怎么修改用户权限
  • linux网络设备有哪些
  • [置顶] 此外,车牌号:458143(懂得都懂[吃瓜])
  • Node.js中的事件循环是什么意思
  • JavaScript中的方法名不区分大小写
  • js鼠标框选
  • js 时间轴
  • android support包
  • flask框架数据可视化
  • 发票 报销期限
  • 重庆地方税务局12366
  • 东莞各税务分局电话
  • 佛山市地方税务局与国家税务局合并没有
  • 我的世界服务器怎么创建
  • 山东中信银行电话
  • 没盖发票专用章可以补盖吗
  • 差额征税差额开票怎么理解
  • 免除滞纳金的条件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设