首页 > 其他分享 >基于vue3+ts+vite的项目使用‘unplugin-auto-import/vite’插件,自动全局导入api的注意事项

基于vue3+ts+vite的项目使用‘unplugin-auto-import/vite’插件,自动全局导入api的注意事项

时间:2023-04-12 15:34:12浏览次数:39  
标签:文件 插件 vue auto ts api import vite

 1.首先安装插件

npm install unplugin-auto-import @vitejs/plugin-vue -D

2.安装完成后在vite.congfig.ts中配置,红色部分就是关于插件的基础自动导入部分,这样就可以将vue和router的相关api全局导入了,

import AutoImport from "unplugin-auto-import/vite"

export default defineConfig({

  plugins: [

    vue(),

    AutoImport({

      imports: ["vue", "vue-router"],

      dts: "types/auto-imports.d.ts",

    }),

  ],

})

注意dts: 指定一个 .d.ts 文件路径,用于保存自动生成的类型声明文件,这里可以自定义文件的路径和名称用于保存声明文件,这里有个关键就是在配置完这个后,需要在tsconfig.json文件中配置一下编译该.d.ts文件,就好像我这里将该文件放在了根目

 

 

 

 

 所以我们需要在tsconfig.json做如下的一些配置​

 这里的include属性指定需要编译的文件,所以我们需要将auto-imports.d.ts文件的路径包含在include里面才能编译成功。

这样就可以成功访问到对应的api了:

那我们不编译会怎么样呢?不配置这个属性的话就会出现如下警告:

 

 

标签:文件,插件,vue,auto,ts,api,import,vite
From: https://www.cnblogs.com/lei-17/p/17309945.html

相关文章

  • APISIX 是怎么保护用户的敏感数据不被泄露的?
    本文以APISIX作为例子,为大家介绍了如何借助GlobalDataEncryption功能来保护敏感数据,确保不会有任何敏感数据进行明文存储,这样即使etcd中所有存储的数据都被盗取,也不会造成敏感数据泄露,从而有效提升了APISIX的安全性。作者刘维,API7.ai技术工程师,ApacheAPISIXContrib......
  • 如何利用空号检测 API 降低企业的业务成本
    引言电话营销和短信营销是现代营销活动的重要手段,但是无效号码的存在导致了很多资源浪费。利用空号检测API就可以避免企业向无效号码发送营销信息,降低营销成本。本文将介绍空号检测API的工作原理以及如何利用空号检测API降低业务成本的多种方式,包括降低电话营销成本、降......
  • jmeter插件的安装
    前言jmeter常用的插件有很多,本身安装的jmeter是没有安装插件的工具,需要下载一个jar包,通过插件安装工具去安装jmeter插件plugins-manager.jar这个jar包就是用来安装jmeter插件的jar把这个jar包下载后放到jmeter的lib/ext目录下重启jmeter就可以用这个工具安装更多的插件安装插件......
  • springboot -eclipse安装springboot插件注意事项
    1.下载包,本地安装,在线安装容易出问题;2.下载的包版本要和eclipse版本一致;3.mac电脑显示和隐藏文件的方法:shift+command+<或者>,分别是显示和隐藏;4.大概率碰到编译报错说找不到org.eclipse.debug.core的问题,第三条就是为了显示隐藏文件,删除/.metadata/.plugins目录下的org.eclipse.......
  • Asp.NetWebApi跨域解决方案
    最近新开项目,项目初期本地部署访问webapi,api采用JWT验证,发现加上Authorization请求头后就报跨域问题,网上很多方案例如修改webconfig请求头什么的,均测试未果,多方尝试后有了以下方案,一行代码便完全解决跨域问题,特此记录!1、NuGet下载Microsoft.AspNet.WebApi.Cors  2、App_Sta......
  • 手机号码归属地 API 实现个性化推荐的思路分析
    前言随着移动互联网和智能手机的普及,越来越多的人使用手机上网和购物,移动营销已成为企业获取用户和提升品牌知名度的重要手段。手机号码归属地API作为移动营销的关键工具,具有广阔的应用前景。本文将探讨如何利用手机号码归属地API进行个性化推荐和精准广告投放,希望对大家有......
  • jmeter插件的安装
    前言jmeter常用的插件有很多,本身安装的jmeter是没有安装插件的工具,需要下载一个jar包,通过插件安装工具去安装jmeter插件plugins-manager.jar这个jar包就是用来安装jmeter插件的jar把这个jar包下载后放到jmeter的lib/ext目录下重启jmeter就可以用这个工具安装更多的插件安装插件......
  • 2023-04-11 使用react-draft-wysiwyg插件进行图片插入后编写文字时抛出错误:Unknown Dr
    前言:react+antd+react-draft-wysiwyg文本编辑业务场景,当我点击插入图片时,在该图片上一行或下一行进行文字输入会报如下错误:报错:UnknownDraftEntitykey:null.未知的DraftEntitykey:null。原因:当你插入图片时,新的图片img需要被包裹在一个块级元素内就不会报错(这看起来并不是原......
  • OpenAI Translator Bob Plugin Bob for Mac上一款基于ChatGPT全局翻译、润色、语法修
    OpenAITranslatorBobPlugin一款可以在Bob进行即时翻译的插件。它基于OpenAI的GPT系列模型,能够提供高质量、准确的翻译服务。该插件支持多种语言的翻译,包括中文、英文、法语、德语、日语等。用户只需在页面中选中需要翻译的文本,然后点击插件图标即可进行翻译。此外,该插件......
  • 【总结】一些已内置不用再下载的vscode插件
    使用vscode进行开发时,不要盲目下载插件。下面本篇文章就来给大家总结分享一些不要再下载的vscode插件,希望对大家有所帮助!vscode好多插件都已经内置了,但是还是有很多憨批不知道,还在傻傻的推荐这些插件来坑萌新。1、AutoRenameTag这个插件是在写html标签的时候可以重命名标签......