vue3项目中如何实现模块的自动导入

vue2和vue3一个很重要的代码区别就是从vue2对象化完整引入函数化按需引入。从而解决了需要什么就引入什么的按需引入操作功能。

然而这一代码操作模式却也引出了后续繁琐代码的书写结构

虽然现在绝大数开发工具都对未引入的内容进行语法错误提示,并提供快速修复。操作提示与协助自动引入对象的功能实现,但这也不能成为我们会喜欢编写如此繁琐代码内容的理由。所有,是否有不需要引入就可以直接使用。提高开发效率的重要问题。

我们可以使用auto.imports,这一插件可以帮助我们进行对象的自动引入操作,这样同样可以省却人工进行代码模式引入处理。在vue3项目中安装auto.imports插件,并且修改vite.config.ts配置文件,引入改插件声明成AutoImport

(1)安装

npm install unplugin-auto-import --save-dev
yarn add unplugin-auto-import --dev

(2)在plugins调用此插件,需要重点注意两个参数:

  • 其一是dts要设置为true,该属性会在配置文件修改完并重启项目以后,在项目根目录会生成一个auto.imports.d.ts自动导入模块的配置文件。
  • 当然,如果想在归中所有,可以进行自动导入的模块进行支持操作,则需要设置import:["vue"]。
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from 'unplugin-auto-import/vite';export default defineConfig({plugins:[vue(),AutoImport({dts:true,imports:["vue"],})],
});

现在通过npm run dev重启项目,并修改项目中的代码内容。将我们手动引入的代码进行删除,程序也能够进行完美的执行。

那么此时也有个疑问,那么对于第三方类库与第三方插件是否也能够支持自动导入???例如axios以及第三方插件vue-router等。

(1)首先我们需要进行模块安装

npm i axios
npm install vue-router

(2)修改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({dts:true,imports:["vue","vue-router",{ axios: [['default','axios']] }],})],
});

经过以上配置,我们就可以在项目中进行axios或vue-router的直接调用。

不过在编辑的过程中,可以会有找不到模块对应内容的提示,虽然提示信息并不会影响程序执行的结果,但是代码的开发体验受到了极大的影响,

(3)可以尝试修改tsconfig.json文件。

设置文件中的include数组部分,这样当前项目能够利用这一描述文件进行资源的查找操作,而不会产生无法找到自动导入的函数模块内容。

"include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","auto-imports.d.ts"
]

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

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

相关文章

数据结构篇-05:哈希表解决字母异位词分组

本文对应力扣高频100 ——49、字母异位词分组 哈希表最大的特点就是它可以把搜索元素的时间复杂度降到O(1)。这一题就是要我们找到 “字母异位词” 并把它们放在一起。 “字母异位词”就是同一个单词中字母的不同组合形式。判断“字母异位词”有两个视角:1、所含字…

全排列 - 三种形式

全排列 - 三种形式 思路 - 回溯 「路径」,记录已经做过的选择「选择列表- 多叉树」,表示当前可以做出的选择,在前序和后序位置操作。 前序位置,做选择进入下一层决策树后序位置,撤销选择 「结束条件」 遍历到树的底层…

全面认识DOS系统

目录 一、DOS系统的功能 1.执行命令和程序(处理器管理) 2.内存管理 3.设备管理 4.文件管理 5.作业管理 二、文件与目录 三、文件类型与属性 1.系统属性(S) 2.隐含属性(H) 3.只读属性&#xff08…

初谈类和对象

文章目录 前言类的引入类的定义类的两种定义方式成员命名规则 类的访问限定符及封装访问限定符面试题封装 类的作用域类的实例化类对象模型计算类对象的大小 this指针this指针特性 前言 C语言是面向过程的,关注点是过程;而C面向的是对象,关注…

mysql-FIND_IN_SET查询优化

优化前 SELECTuser_id,user_name,real_name,PASSWORD,real_org_id,real_org_name,real_dept_id,real_dept_name, STATUS FROMsys_user WHEREis_del 0 AND find_in_set( lilong, login_user_account ) 优化后 SELECTuser_id,user_name,real_name,PASSWORD,real_org_id,real…

回归预测 | Matlab实现RIME-CNN-LSTM-Attention霜冰优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制)

回归预测 | Matlab实现RIME-CNN-LSTM-Attention霜冰优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制) 目录 回归预测 | Matlab实现RIME-CNN-LSTM-Attention霜冰优化卷积长短期记忆网络注意力多变量回归预测(SE注意力机制&#xff0…

如何处理我们的文本数据成构建词表

我们拿到在拿到一堆语料数据,或者是在网络中爬取下来的文本数据如何处理成为模型能够训练的数据呢?这里有我们先经过停用词和按字分词的处理之后,得到的问答对文本数据,input_by_word.txt 和 target_by_word.txt 。其中&#xff0…

2024美赛预测算法 | 回归预测 | Matlab基于RIME-LSSVM霜冰算法优化最小二乘支持向量机的数据多输入单输出回归预测

2024美赛预测算法 | 回归预测 | Matlab基于RIME-LSSVM霜冰算法优化最小二乘支持向量机的数据多输入单输出回归预测 目录 2024美赛预测算法 | 回归预测 | Matlab基于RIME-LSSVM霜冰算法优化最小二乘支持向量机的数据多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效…

5、DSP28335 串口发送接收FIFO中断,自定义printf函数

#include "uart.h"unsigned char data[8];void MyUartInit(Uint32 baud) {unsigned char scihbaud 0;unsigned char scilbaud 0;Uint16 scibaud 0;EALLOW;InitSciaGpio();EDIS;EALLOW;//0:一位停止位;1:两位停止位SciaRegs.SCIC…

Docker进阶篇-Docker网络

一、描述 1、docker不启动,默认网络情况 查看网卡情况使用,ifconfig或者ip addr ens33:本机网卡 lo:本机回环网络网卡 virbr0:在CentoS 7的安装过程中如果有选择相关虚拟化的的服务安装系统后,启动网卡时会发现 …

Web实战丨基于Django的简单网页计数器

文章目录 写在前面Django简介主要程序运行结果系列文章写在后面 写在前面 本期内容 基于django的简单网页计数器 所需环境 pythonpycharm或vscodedjango 下载地址 https://download.csdn.net/download/m0_68111267/88795604 Django简介 Django 是一个用 Python 编写的高…

游戏找不到d3dcompiler_43.dll怎么办?多种5种解决方法分享

在运行游戏的过程中,系统遇到了一个关键性的问题,即无法成功找到名为“d3dcompiler_43.dll”的动态链接库文件。这一特定的dll文件对于游戏的正常启动和图形渲染至关重要,它的缺失可能会导致游戏无法运行或者画面无法正确显示。通常情况下&am…

day07-CSS高级

01-定位 作用:灵活的改变盒子在网页中的位置 实现: 1.定位模式:position 2.边偏移:设置盒子的位置 left right top bottom 相对定位 position: relative 特点: 不脱标,占用自己原来位置 显示模…

10秒搞定!隔壁奶奶都能搞定的幻兽帕鲁、雾锁王国开服指南

最近《幻兽帕鲁》和《雾锁王国》非常火热,玩过的小伙伴们都说非常上头!有跟朋友对战需求的小伙伴们可以通过本文拥有一台高性价比的专用服务器,随时可以用来跟朋友一起玩游戏! 敲重点!!! 步骤…

2021-10-14 51蛋骗鸡1秒变动0-9按键控制并蜂鸣器响

缘由单片机程序设计与应用-Python-CSDN问答 #include "REG52.h" sbit K1 P3^0; sbit K2 P3^1; sbit K3 P3^2; sbit K4 P3^3; sbit bpP3^4; bit k1,wk0; unsigned char code SmZiFu[]{63,6,91,79,102,109,125,7,127,111,128,255,64};//0-9.消隐- unsigned char J…

【深度学习: 计算机视觉】如何改进计算机视觉数据集

【深度学习: 计算机视觉】如何改进计算机视觉数据集 训练模型并评估性能确定数据集需要改进的原因和位置收集或创建新的图像或视频数据重新训练机器学习模型并重新评估,直到达到所需的性能标准 机器学习算法需要大量数据集来训练、提高性能并生成组织所需…

基于SpringBoot+Vue的高校在线答疑管理系统

末尾获取源码作者介绍:大家好,我是墨韵,本人4年开发经验,专注定制项目开发 更多项目:CSDN主页YAML墨韵 学如逆水行舟,不进则退。学习如赶路,不能慢一步。 目录 一、项目简介 二、开发技术与环…

代码随想录算法训练营day38 || 509. 斐波那契数,70. 爬楼梯,746. 使用最小花费爬楼梯

视频讲解: 手把手带你入门动态规划 | LeetCode:509.斐波那契数_哔哩哔哩_bilibili 带你学透动态规划-爬楼梯(对应力扣70.爬楼梯)| 动态规划经典入门题目_哔哩哔哩_bilibili 动态规划开更了!| LeetCode:746.…

P8598 [蓝桥杯 2013 省 AB] 错误票据--2024蓝桥杯冲刺省一

点击跳转例题 思路: 直接进行模拟即可,需要注意的是有很多细节. 首先输入的问题:每个例子没有给出数量,那么我们怎么办呢? 当然是直接读入一整行! 那么我们如何分割呢?这里引入stringstream(知识总结); 利用getline()读入一整行,stringstream来过滤掉空格; #include <b…

springwebflux高性能服务

场景&#xff1a; 分别使用springwebmvc 使用tomcat &#xff08;tomcat 9&#xff09;和springwebflux 做一个简单的接口 &#xff0c;该接口返回一个随机数 压测环境&#xff1a; 4C 8G ECS 使用tomcat 压测结果 Max 抖动的厉害 保持压测的参数不变 使用webflux 压测结果 …