vue3.2引用unplugin-auto-import插入,解放开发中import组件

目录

  • 前言
  • 引用unplugin-auto-import插件的优缺点
    • 优点
    • 缺点
  • unplugin-auto-import插件引入
    • 安装插件
    • 配置vite配置
    • 更新TypeScript配置
    • 使用
    • 代码位置
  • 总结

前言

       是否添加unplugin-auto-import取决于项目需求和团队习惯。如果项目中频繁使用Vue相关API,并且团队成员都熟悉这种自动导入方式,那么添加这个插件可能会提高效率。然而,如果项目结构相对简单,或者团队成员更习惯于显式导入依赖,那么可能不需要添加这个插件。总之,这是一个平衡开发效率和代码清晰度的决策。

引用unplugin-auto-import插件的优缺点

优点

  • 自动导入: unplugin-auto-import允许自动导入常用的库和框架API,如Vue、Vuex、Vue Router等,从而减少在每个文件中重复编写import语句的需要。
  • 代码整洁: 自动导入功能使得代码更加整洁,易于阅读和维护。
  • 配置灵活性: 插件提供了灵活的配置选项,可以根据项目需求自定义自动导入的API。
  • 减少打包体积: 通过只导入用到的API,有可能减少最终打包的体积。
  • 开发效率提升: 减少手动导入工作量,可以加速开发流程。

缺点

  1. 隐藏的依赖: 自动导入可能会隐藏代码的依赖关系,对于新加入项目的开发者来说,可能不清楚某些API是如何被引入的。
  2. 配置复杂性: 对于初学者或不熟悉该插件的开发者来说,配置和理解unplugin-auto-import可能有一定难度。
    3.工具链复杂化: 在项目中增加额外的插件会使得工具链更加复杂,可能会影响构建速度和维护难度。
    4.IDE支持: 某些集成开发环境(IDE)可能不完全支持自动导入功能,这可能影响代码的智能提示和错误检查。

unplugin-auto-import插件引入

安装插件

npm install unplugin-auto-import -D
# 或者使用 yarn
yarn add unplugin-auto-import -D

配置vite配置

       在你的Vite配置文件(通常是vite.config.js或vite.config.ts)中添加对应的配置。在imports中添加你想要自动导入的相关库,如:vue、vue-router、vuex等。

import AutoImport from 'unplugin-auto-import/vite'export default {plugins: [AutoImport({// 指定需要自动导入的库imports: ['vue', 'vue-router', 'vuex'],// Vite特定的配置dts: 'src/auto-imports.d.ts', // 生成自动导入类型声明文件// 其他配置...}),// ...其他插件],// ...其他Vite配置
}

更新TypeScript配置

       如果项目是TypeScript项目,更新tsconfig.json以包含自动生成的类型声明文件:

{"compilerOptions": {// ...其他配置"types": [// ...其他类型"src/auto-imports.d.ts" // 添加这一行]},"include": ["components.d.ts","src/auto-imports.d.ts"],
}

使用

<template>//...页面代码
</template>
<script lang="ts" setup>
// 使用vue-router,不用引用直接使用就可以
let router = useRouter();
let route = useRoute();
// 使用ref,不用引用直接使用就可以
const info = ref<any>({title: route?.meta?.title || "财务管理",rightButton: "新增",leftPath: "/",
});
let loading = ref<boolean>(false);
</script>

代码位置

       github代码地址

总结

       至此在在项目中配置unplugin-auto-import插件,自动引入组件库就完成。快去体验吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/610029.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MulticoreWare与Imagination一同按下汽车计算工作负载的“加速键”

中国北京 – 2024年1月8日 - MulticoreWare Inc与Imagination Technologies共同宣布已在德州仪器TDA4VM处理器上实现了GPU计算&#xff0c;不仅使算力提升了约50 GFLOPS&#xff0c;而且还实现了自动驾驶和高级驾驶辅助系统&#xff08;ADAS&#xff09;常见工作负载性能的跃升…

使用Docker部署PDF多功能工具Stirling-PDF

1.服务器上安装docker 安装比较简单&#xff0c;这种安装的Docker不是最新版本&#xff0c;不过对于学习够用了&#xff0c;依次执行下面命令进行安装。 sudo apt install docker.io sudo systemctl start docker sudo systemctl enable docker 查看是否安装成功 $ docker …

前端项目由nginx迁移到apache httpd

前端项目由nginx迁移到apache httpd 前端项目存放目录为 /var/www/dist 虚拟主机端口80 反向代理拦截 /prod-api 后端服务地址 http://192.168.0.44:8097 <VirtualHost *:80>DocumentRoot /var/www/distServerName www.dist.com<Directory /var/www/dist>RewriteEn…

PCL 使用克拉默法则进行四点定球(C++详细过程版)

目录 一、算法原理二、代码实现三、计算结果本文由CSDN点云侠原创,PCL 使用克拉默法则进行四点定球(C++详细过程版),爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT生成的文章。 一、算法原理 已知空间内不共面的四个点,设其坐标为 A (…

鼠标随动指定区域高亮显示(Excel聚光灯)

实例需求&#xff1a;工作表中数据表实现跟随鼠标选中高亮效果&#xff0c;需要注意如下几个细节需求 数据表为连续区域&#xff0c;但是不一定从A1单元格开始数据表的前两行&#xff08;标题行&#xff09;不使用高亮效果数据表中已经应用了条件格式&#xff0c;高亮显示取消…

计算机网络专栏目录

1. http header 请求头 x-forwarded-for 2. HTTP/HTTPS、TLS/SSL 协议

redis持久化与SpringBoot整合

redis持久化与SpringBoot整合 1、Redis全局命令1.2、Redis事务 2、Redis持久化2.1、RDB方式2.1.1、客户端触发机制2.1.2、服务端触发机制2.2.3、配置生成快照名称和位置2.2.4、优点2.2.5、缺点 2.2、AOF方式2.2.1、优点2.2.2、缺点 2.3、RDB-AOF混合方式2.4、持久化机制的选择 …

0-快速了解

1.项目简介 RuoYi-Vue是一款基于SpringBootVue的前后端分离极速后台开发框架。 RuoYi 官网地址&#xff1a;http://ruoyi.vip(opens new window)RuoYi 在线文档&#xff1a;http://doc.ruoyi.vip(opens new window)RuoYi 源码下载&#xff1a;https://gitee.com/y_project/Ru…

Nginx配置jks格式证书,升级https

通常在给服务器升级https&#xff0c;需要在nginx上配置域名对应的https证书&#xff0c;nginx通常配置的是crt和key格式的证书。最近遇到有人提供了jks格式的证书&#xff0c;查阅了几个资料都是需要先将jks转为p12格式&#xff0c;然后再将p12转为crt格式。这里记录一下相关过…

在JavaFX中的module-info.java的大坑,实现怎么删除这个后不会报错“需要JavaFX运行组件”

如果你也是因为module-info导致项目一些依赖包不能用&#xff0c;那么可以试着删除这个模块&#xff1b;话不多说&#xff0c;请看image 1.首先删除你的module-info.java&#xff08;注意&#xff1a;你要是怕出错的话&#xff0c;建议提前备份你的项目&#xff09; 2.然后找到…

影视视频知识付费行业万能通用网站系统源码,三网合一,附带完整的安装部署教程

在数字化时代&#xff0c;知识付费行业逐渐成为主流。人们对高质量内容的需求日益增长&#xff0c;越来越多的人愿意为有价值的知识和信息服务付费。为了满足这一市场需求&#xff0c;罗峰给大家分享一款全新的影视视频知识付费网站系统源码&#xff0c;为用户提供一站式的知识…

c# 多循环如何跳出

如果内层循环满足某种条件时&#xff0c;你明确知道无需再执行外层循环剩余的部分&#xff0c;可以直接改变外层循环的控制变量值使其无法满足循环条件。 for (int i 0; i < 10; i) {for (int j 0; j < 10; j){if (SomeCondition(i, j)){i 10; // 直接将i设为超出范围…

Python列表append()函数使用详解

在Python中&#xff0c;列表是一种可变序列类型&#xff0c;可以用来存储多个元素。列表的append()函数是用于在列表末尾添加新元素的内置方法。本文将详细介绍Python列表的append()函数及其使用方法。 一、append()函数的基本语法 append()函数的语法非常简单&#xff0c;只…

Android Serializable 和 Parcelable 的详解以及代码示例(Kotlin)

1. Serializable和Parcelable的区别&#xff08;简单记忆&#xff09;&#xff1a; Serializable适用于简单的对象序列化&#xff0c;而Parcelable适用于需要更高效的对象序列化和反序列化的情况&#xff0c;特别是在Android开发中。 Serializable是Java平台的标准接口&#xf…

electron自定义窗口和右键菜单样式

前言 electron默认沿用系统UI&#xff0c;并没有提供很多接口供使用者定制样式&#xff0c;如果想要完全自定义的样式&#xff0c;目前我能想到的方案只能是通过前端自定义样式&#xff0c;然后通过进程通信来实现系统基础功能&#xff1a;最大/小化、关闭、拖动窗口等。 效果…

面试宝典进阶之关系型数据库面试题

D1、【初级】你都使用过哪些数据库&#xff1f; &#xff08;1&#xff09;MySQL&#xff1a;开源数据库&#xff0c;被Oracle公司收购 &#xff08;2&#xff09;Oracle&#xff1a;Oracle公司 &#xff08;3&#xff09;SQL Server&#xff1a;微软公司 &#xff08;4&#…

麒麟系统安装docker、mysql、clickhouse

1、查看麒麟系统版本信息 cat /etc/os-release 麒麟系统版本V10 64位操作系统 # uname -p x86_64 # uname -p aarch64 内核版本 # uname -r 4.19.90-24.4.v2101.ky10.x86_64 本操作为麒麟系统版本V10&#xff0c;x86_64操作系统 一&#xff0c;安装docker 文件&#xff1a…

MySQL数据库备份脚本(mysqldump)

数据库备份脚本 以下shell脚本的主要目的是备份数据库&#xff0c;并在需要时删除旧的备份文件以节省空间。它使用 mysqldump 命令来执行数据库备份&#xff0c;将备份文件存储在指定的路径下&#xff0c;并根据文件数量的阈值来删除旧的备份文件。扫描文章末尾二维码关注公众…

js(JavaScript)数据结构之队列(Queue)

什么是数据结构&#xff1f; 下面是维基百科的解释&#xff1a; 数据结构是计算机存储、组织数据的方式。数据结构意味着接口或封装&#xff1a;一个数据结构可被视为两个函数之间的接口&#xff0c;或者是由数据类型联合组成的存储内容的访问方法封装。 我们每天的编码中都会…

掌控电路之源:电子元器件中的开关探秘

在电子元器件中&#xff0c;开关是一种非常重要的组成部分&#xff0c;它能够控制电路的接通和断开&#xff0c;从而实现电路的各种功能。开关的作用是控制电流的通断&#xff0c;从而控制电路中的信号和能量的流动。本文将介绍电子元器件中开关的类型、作用和特点。 开关可以…