当前位置: 首页 > news >正文

自动导入unplugin-auto-import+unplugin-vue-components

文章介绍

接下来将会以Vite + Vue3 + TS的项目来举例实现

在我们进行项目开发时,无论是声明响应式数据使用的ref、reactive,或是各种生命周期,又或是computed、watch、watchEffect、provide-inject。这些都需要前置引入才能使用:

import { ref, reactive, onMounted, watch, provide} from 'vue'

除了以上这些功能相关的模块外,我们还会涉及到对组件的引用,比如熟知的新建一个项目都会有这两个文件:App.vue 和 HelloWorld.vue,也会在App.vue中看到以下代码:

import HelloWorld from './components/HelloWorld.vue'

这里只是导入了一个组件,如果一个页面由多个组件构成,那将会有很多个 import

现在有两个兄弟可以帮助我们完成自动化引入,无论是上述说的功能模块 or 组件

unplugin-auto-import:可按需自动导入模块,譬如上述的ref、watch等

unplugin-vue-components:自动导入vue的非插件组件,譬如上述的HelloWorld

不知道大家有没有使用过Element+,也就是ElementPlus,在它的按需导入中,有这样的说明

我们要用的也就是这兄弟俩

插件介绍

安装

可以从npm看到两个依赖的一些功能介绍:

npm依赖介绍:unplugin-auto-import - npm (npmjs.com)

npm依赖介绍:unplugin-vue-components - npm (npmjs.com)  

在npm的介绍中还可以看到它对于UI组件库的支持范围还是很广泛的:

这里我采用pnpm作为包管理工具,大家可以根据自己的情况来调整安装方式 

pnpm install -D unplugin-vue-components unplugin-auto-import

除了安装这两个插件之外,为了更好的演示组件的免导入,我这里安装Element+

pnpm install element-plus

配置 

我的项目是vite构建,所以对应的项目构建配置文件是vite.config.ts

为方便管理插件配置,我通常会把插件配置写到一个单独的文件中,再到vite.config.ts中引入,大家可以直接写到配置文件中。

因为要用Element组件库做组件免导入的演示,所以下面配置了ElementPlusResolver相关代码,这块代码大家在Element+的按需导入说明中可以看到;其他配置可以从npm依赖介绍中查看。

// /config/plugin/index.ts
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';export function vitePluginsConfig(command = 'serve') {return [vue({ include: [/\.vue$/, /\.md$/] }),AutoImport({imports: ['vue'],resolvers: [ElementPlusResolver()],dts: 'types/auto-imports.d.ts' // 会在根目录下的types目录中生成该文件——记录自动导入了哪些模块}),Components({dirs: ['src'],dts: 'types/auto-components.d.ts', // 会在根目录下的types目录中生成该文件——记录自动导入了哪些组件resolvers: [ElementPlusResolver()] }),];
}
// vite.config.ts
import { vitePluginsConfig } from './config/plugin'
import { defineConfig } from 'vite'export default defineConfig({plugins: vitePluginsConfig()
})

演示

接下来启动项目,就可以免去 ref 的引用以及 HelloWord 的导入操作了

在没有做全局引入的情况下,HellowWorld 和 el-button 依旧可正常显示 。

 打开自动生成的auto-components.d.ts后可以看到 HelloWorld 和 el-button 已经被自动导入:

 问题 

项目中使用到了Typescript 和 Eslint,以至于这里报错:找不到名称“ref”

这个错误可能会由 ts 提出,也可能由eslint 提出。

该问题会在下一篇文章来说明如何处理。 

相关文章:

自动导入unplugin-auto-import+unplugin-vue-components

文章介绍 接下来将会以Vite Vue3 TS的项目来举例实现 在我们进行项目开发时,无论是声明响应式数据使用的ref、reactive,或是各种生命周期,又或是computed、watch、watchEffect、provide-inject。这些都需要前置引入才能使用: …...

Conda修改包/虚拟环境储存目录

Conda修改包/虚拟环境储存目录 关键字样例 关键字 通过conda config --show [key]可以查看某个配置的值,[key]留空可以查看所有配置 其中: envs-dirs 存放虚拟环境的储存目录pkgs_dirs 包的目录 通过conda config --add [key] [value]可以为配置添加值…...

Live555源码阅读笔记:哈希表的实现(C++)

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…...

警务平台app

智慧公安以大数据、云计算、人工智能、物联网和移动互联网技术为支撑,以“打、防、管、控”为目的,综合研判为核心,共享信息数据资源,融合业务功能,构建公安智慧大数据平台,实现公安信息数字化、网络化和智…...

Java代理模式详解

Java代理模式详解 概念 代理模式是一种设计模式,为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用。在Java中,代理…...

docker centos镜像 npm安装包时报错“npm ERR! code ECONNRESET”

1.采用新的镜像地址 npm config set registry https://registry.npmmirror.com2.清理缓存 npm cache clean --force3.安装yarn npm install -g yarn4. 安装模块 在node_modules 同级目录执行下面命令: yarn add napi-build-utils env-paths express ejs cors …...

Angular中component和directive的区别?

在Angular中,Component和Directive都是重要的构建块,用于构建和组织应用程序的UI。然而,它们有不同的用途和特点。以下是Component和Directive的主要区别: Component(组件) 1、定义:Component…...

Unity 资源 之 Pop It 3D 解压玩具与双人AI游戏 Unity 资源包分享

精彩呈现:Pop It 3D 解压玩具与双人AI游戏 Unity 资源包分享 一、Pop It 3D 解压玩具的魅力二、双人游戏的互动乐趣三、Unity 游戏资源包的优势四、如何获取资源包 亲爱的游戏爱好者们,今天为大家带来一款令人兴奋的游戏资源——Pop It 3D 解压玩具双人带…...

linux离线安装mysql8(单机版)

文章目录 一、检查服务器是否有残留mysql资源,有的话就全删除1.1、查询mysql已安装的相关依赖:1.2、查找含有MySQL的目录 二、安装2.1、上传mysql安装包到文件夹下并解压2.2、移动及重命名2.3、mysql用户2.4、配置mysql所需的my.cnf文件2.5、给my.cnf配置…...

【Python】快速创建一个简易 HTTP 服务器(http.server)

目录 官方文档安装教程用命令行创建编写代码创建 实例 官方文档 http.server 警告: http.server 不推荐用于生产环境。它仅仅实现了 basic security checks 的要求。 安装 Python3 内置标准模块,无需安装。(在之前的 Python2 版本名称是 Si…...

随着软件开发方法的不断演进,Cobol 程序如何适应敏捷开发和持续集成/持续部署(CI/CD)的流程?

Cobol是一种古老的编程语言,最初设计用于商业数据处理。虽然它不是为敏捷开发和CI/CD流程而设计的,但仍然可以通过一些技术和方法来使其与这些现代开发流程兼容。 以下是一些方法可以帮助Cobol程序适应敏捷开发和CI/CD流程: 拆分和模块化&am…...

nodejs - MongoDB 学习笔记

一、简介 1、MongoDB 是什么 MongoDB 是一个基于分布式文件存储的数据库,官方地址 https://www.mongodb.com/ 2、数据看是什么 数据库(DataBase)是按照数据结构来组织、存储和管理数据的应用程序。 3、数据库的作用 主要作用是 管理数据…...

photoshop学习笔记——移动工具

移动工具,可以对图层进行移动,快捷键 V 使用的素材已经放上了,直接下载即可 按住ctrl 可以自动选取,鼠标点击哪个对象,自动选中哪个图层 按住 shift 校正角度(只能沿着直线移动) 按住 alt 拖…...

HarmonyOS 质量、测试、上架速浏

1.应用质量要求: 1. 应用体验质量建议: 功能数据完备 功能完备 数据完备 基础体验要求 基础约束 兼容性 稳定性 性能 功耗 安全…...

TS的访问修饰符有哪些

如果你和我一样是从强类型语言(如C、C#、Java)转过来的,相信你会一眼就知道是什么 public(默认) - 全部可访问 protected - 自己和派生类可访问 private - 只有自己可访问 废话不多说,上代码: class Person {publ…...

网络安全之扫描探测阶段攻防手段(二)

扫描探测 扫描探测阶段是攻击者对目标网络进行深入了解的关键步骤,同时也是防御者识别潜在威胁和加强安全防护的机会。 攻击端:技术原理和工具 端口扫描: 原理:攻击者使用端口扫描工具来识别目标网络中开放的端口,这…...

C++:泛型算法了解

什么是泛型算法 泛型算法是C标准模板库(STL)中的一部分,它们表示的是可以用于不同类型的元素和多种容器类型的一些经典算法的公共接口。这些算法之所以被称为“泛型”,是因为它们可以操作在多种容器类型上,包括但不限…...

基于bert的自动对对联系统

目录 概述 演示效果 核心逻辑 使用方式 1.裁剪数据集 根据自己的需要选择 2.用couplet数据集训练模型 模型存储在model文件夹中 3.将模型转换为ONNX格式 4.打开index.html就可以在前端使用此自动对对联系统了。 本文所涉及所有资源均在传知代码平台可获取。 概述 这个生成器利用…...

js-vue中多个按钮状态选中类似于复选框与单选框实现

1.vue中多个按钮状态选中类似于复选框 在Vue中处理多个按钮的选中状态切换&#xff0c;通常我们会利用Vue的响应式数据系统来追踪每个按钮的选中状态。 html <div id"app"> <button v-for"button in buttons" :key"button.id" :c…...

ObservableCollection新增数据前判断数据是否存在

public class MyDataModel {public int Id { get; set; }public string Name { get; set; }}public static void Main(){// 创建 ObservableCollectionObservableCollection<MyDataModel> myDataCollection new ObservableCollection<MyDataModel>{new MyDataMode…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...