首页 > 其他分享 >前端模块自动导入的插件

前端模块自动导入的插件

时间:2024-08-26 16:51:27浏览次数:11  
标签:插件 vue const api 导入 模块 router import vite

前言

开发中通常会有很多导入语句,如何确保一些通用的api和hook无需每次手动导入即可使用。

<script setup lang="ts">
import { ref, reactive } from "vue"
import { useRoute, useRouter } from "vue-router"
import { login } from "./api/user"

const count = ref(0)
const user = reactive({})
const route = useRoute()
const router = useRouter()
</script>

实现

下载unplugin-auto-import

npm i -D unplugin-auto-import

这里以 vite 举例,vite.config.ts如下:

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"], // 第三方模块
      dirs: ["./src/api"], // 本地
    }),
  ],
})

配置完毕后,无需导入即可使用

<script setup lang="ts">
// import { ref, reactive } from "vue"
// import { useRoute, useRouter } from "vue-router"
// import { login } from "./api/user"

const count = ref(0)
const user = reactive({})
const route = useRoute()
const router = useRouter()
</script>

如果是ts项目,由于没有导入语句导致类型丢失

在这里插入图片描述

增加配置项dts即可,路径随意

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"], // 第三方模块
      dirs: ["./src/api"], // 本地
      dts: './src/auto-import.d.ts',
    }),
  ],
})

启动项目时会自动在此路径下生成类型文件

在这里插入图片描述
ts报错消失,且功能正常

在这里插入图片描述

标签:插件,vue,const,api,导入,模块,router,import,vite
From: https://blog.csdn.net/owo_ovo/article/details/141563421

相关文章

  • 利用kafka和kafka connect插件debezium实现oracle表同步
    1.kafka安装1.1.java安装openjdk下载,建议使用17,至少应该高于版本11#进入家目录,解压下载的java包,配置环境变量tarvxfopenjdk-20.0.1_linux-x64_bin.tar.gz-C/usr/local/vi.bash_profile#注意要把JAVA的目录放到$PATH之前exportJAVA_HOME=/usr/local/jdk-20exportP......
  • UE5蓝图 离线实时语音转文字插件 教程 c/c++插件 毫秒级响应 比http更节约资源
    UE5蓝图实现离线实时语音转文字插件教程如何用UE5蓝图实现离线实时语音转文字,实时接收麦克风音频并且快速的转换成文字。那么我来分享一下ez2txt这个插件。bilibili使用教程效果展示:蓝图:只要启动麦克风就可以了,其他的繁琐步骤插件都封装好了。参数说明Rule1_m......
  • 蓝桥杯单片机入门(6)—LED灯模块
    这回我们讲,蓝桥杯中LED模块1.点亮一颗LED灯    在写代码之前我们必须要先明确自己的目的,然后根据需求去写对应的代码功能。首先我们要实现点亮一颗LED灯,在此之前我们要先了解一下LED灯的工作原理,    首先我们看一下,LED灯的原理图,图中写LED1的地方就是LED灯,......
  • 什么是前端模块化
    面试中,关于打包工具的相关知识是非常常见的考题,无可避免的可能会被问到,为什么需要使用到打包工具、或前端工程化的实现,而要回答这些问题前,需要先了解的就是前端模块化。所以在本篇笔记中,会让大家了解前端模块化的演进和功用。文末有我帮助500多人拿到前端offer的文章!!!什么......
  • WordPress插件存在严重缺陷,允许黑客获取管理员访问权限
    近日,网络安全研究人员披露了WordPress的LiteSpeedCache插件中的一个严重安全漏洞,该漏洞可能允许未经身份验证的用户获得管理员权限。国际知名网络黑客安全专家、东方联盟创始人郭盛华在周一的一份报告中表示:“该插件存在未经身份验证的权限提升漏洞,任何未经身份验证的访问者都......
  • 超详细教程 | Hands-On 基于 Flagchip FC4150 MCAL-使用 GPT 模块定时喂狗
    简介    本文将详细介绍如何使用EB工具配置FlagchipFC4150MCAL使用GPT模块定时喂狗,并重点强调了配置GPT、WDG模块的过程以及对GPT、WDG模块的详细解释,关于mcu、port、dio、icu、adc、pwm模块可参考之前发布的博文。本次示例演示将会使用FTU4_CH0超......
  • notification ant插件 封装notification 防止多个相同的错误提示同时展示 message也
    import{notification}from'ant-design-vue'typeNoticeType='info'|'success'|'error'|'warning'//保证notification提示不重复constmessageSet=newSet();letclearTimer:number|undefined;interf......
  • AI人像换脸!Reactor插件本地部署方法(含报错解决及整合包)
    ​Reactor插件是什么?有什么用?Reactor是一个用于StableDiffusion的换脸插件,主要功能是实现图片中的精确换脸。它可以自动检测并替换图片中的多个面部,适用于多种场景,比如生成逼真的图像或者进行复杂的图片处理。通过Reactor,用户可以更轻松地实现高质量的换脸效果,提......
  • 英飞凌TC3XX PFI模块
    文章目录概要一、功能概述二、功能详述1)传输类型2)传输过程3)FPI总线控制单元及总线仲裁三、故障检测及处理1)BCU诊断及处理2)EDC诊断及处理3)BCU报警机制概要本文主要对英飞凌TC3XX系列的PFI模块进行介绍,针对该芯片,系统的片上通信主要包括两种:1、SRI:共享资源互联(cros......
  • sql server导入mysql,使用python多线程
    概述在上一篇文章中,链接:https://www.cnblogs.com/xiao987334176/p/18377915使用工具SQLyog进行导入,传输过程是单进程的,一个表一个表的传,一条条数据插入,所以传输速度会比较慢。如果sqlservermdf文件在200m左右,传输需要花费30分钟左右。如果来了一个10GB左右的mdf的文件,需要25......