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

news2024/12/29 9:24:43

文章介绍

接下来将会以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 提出。

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

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

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

相关文章

Mem0:个性化的AI记忆层,一款开源的大语言记忆增强工具

在人工智能的浪潮中,个性化体验已成为创新的关键。而随着各种各样的模型迭代更新,如何为AI应用提供持久、智能的记忆系统逐渐成为了一个关键挑战。 最近开源的Mem0项目为我们提供了一个强大的解决方案。它为大型语言模型(LLM)提供了一个智能、自我优化的…

CTF ssrf 基础入门

0x01 引言 我发现我其实并不是很明白这个东西,有些微妙,而且记忆中也就记得Gopherus这个工具了,所以重新学习了一下,顺便记录一下吧 0x02 辨别 我们拿到一个题目,他的名字可能就是题目类型,但是也有可能…

昇思25天学习打卡营第九天|本地安装mindspore之一|Linux的系统在vmware上的安装以及mindspore的安装

课程已经学完了,打算再深入一些。初步的想法是,在本地安装,本地执行。 根据老师的指引,MindSpore官网,“https ://www.mindspore.cn/install/”,注意,因为csdn博客编辑器的原因,当我…

C#与C++交互开发系列(三):深入探讨P/Invoke基础知识

欢迎来到C#与C交互开发系列的第三篇。在这篇博客中,我们将深入探讨P/Invoke(Platform Invocation Services)的基础知识。P/Invoke是C#调用非托管代码的一种机制,能够让C#直接调用C编写的动态链接库(DLL)中的…

轻松翻译,你值得拥有的PDF翻译工具分享

大家好,作为一名初入职场的小菜鸟,我发现了一个让我头疼不已的问题——那就是PDF文件的翻译。在全球化日益加剧的今天,我们经常会遇到需要阅读或者翻译外文PDF文件的情况。但PDF文件不同于Word或Excel,它通常不易直接编辑&#xf…

C语言 | Leetcode C语言题解之第278题第一个错误的版本

题目&#xff1a; 题解&#xff1a; int firstBadVersion(int n) {int left 1, right n;while (left < right) { // 循环直至区间左右端点相同int mid left (right - left) / 2; // 防止计算时溢出if (isBadVersion(mid)) {right mid; // 答案在区间 [left, mid] 中…

SWAT模型

原文链接&#xff1a;SWAT模型https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247610033&idx2&snc1da9be73550928ecc6a7a165dda3d9c&chksmfa826f56cdf5e640f891c6977cec1b2728ee2554ceacd224903df73d2dfedcd0c8b9ec047843&token91118244&langzh…

uniapp入门超详细教程:如何从零开始搭建项目

目录 一、介绍 二、环境搭建 2.1.需要下载的软件 2.1.1 HBuilderX 2.1.2 下载微信开发者工具 2.2 创建uniapp项目 2.2.1 新建项目 2.2.2 项目基本结构 2.2.3 在微信开发者工具上运行 2.2.4 发布微信小程序 三、pages.json 页面路由 四、组件 4.1 视图容器 4.1.1 v…

超分AI模型学习

概述 超分&#xff08;超分辨率&#xff1a;Super Resolution&#xff0c;SR&#xff09;&#xff1a;是计算机视觉和图像处理领域的一个热门话题。主要是将低分辨率图像恢复出高分辨率图像。可以采用的方法和手段很多&#xff0c;最近项目中有涉及&#xff08;红外成像的超分处…

Axivion Suite 7.8现已发布

现已实现100%覆盖MISRA规则&#xff0c;并加入了高级功能来提高代码分析能力。 我们很高兴地宣布Axivion Suite 7.8发布。全新版本的Axivion Suite对编译器、配置、分析、仪表板 (WebUI)和IDE插件的架构验证和静态代码分析功能均进行了升级。 100%覆盖所有可测试的MISRA规则 …

centos系统mysql集群复制双主双从

文章目录 MySQL 双主双从集群一、 准备环境二、 配置主服务器1. 配置 MySQL 主服务器 1 (192.168.1.1)2. 配置 MySQL 主服务器 2 (192.168.1.2) 三、配置从服务器1. 配置 MySQL 从服务器 1 (192.168.1.3)2. 配置 MySQL 从服务器 2 (192.168.1.4)3. 在主服务器 1 上配置复制到主…

使用php adodb5连接人大金仓数据库

打开php中的pgsql扩展 extensionpgsql使用adodb5连接kingbase数据库 <?php include("adodb5/adodb.inc.php"); $fox_dbtype pgsql; $fox_host 192.168.1.66; $fox_user system; $fox_pwd 123456; $fox_dbname testkingbase; $fox_port 54321;$dbNewADOCo…

【实战】Spring Cloud Stream3.0 整合RocketMq

文章目录 前言技术积累Spring Cloud Stream3.0新特性RocketMq简介 实战演示引入Maven依赖增加application配置消息生产者消息消费者 前言 相信很多同学用使用过rocketmq消息中间件&#xff0c;且大多情况下是使用原生的rocketmq-spring-boot-starter 进行集成然后创建一个rock…

Unity显示泰语且兼容泰语音标

前言&#xff1a;使用Unity开发的游戏需要支持泰语本地化&#xff0c;以及解决显示泰语时Unity的bug 目录 1、Text组件显示泰语2、TextMeshPro组件显示泰语 现在很多游戏都需要显示泰语&#xff0c;下面将介绍Unity如何显示泰语&#xff0c;&#xff08;仅介绍Unity字体方面的设…

Transformer自然语言处理实战pdf阅读

一.第一章 欢迎来到transformer的世界 1.解码器-编码器框架 在Transformer出现之前&#xff0c;NLP的最新技术是LSTM等循环架构。这些架 构通过在神经网络连接使用反馈循环&#xff0c;允许信息从一步传播到另一 步&#xff0c;使其成为对文本等序列数据进行建模的理想选择。如…

多表查询时条件写在where和join on的区别

文章目录 一、初始数据二、问题分析三、总结 先说结论&#xff0c; 1.如果想要拿到主表不受到关联表查询条件的数据的话&#xff0c;那么建议直接将查询条件放到on之后。 2.如果将关联表的条件查询放在where之后&#xff0c;可能会将主表中的数据进行排除。 所以如果想实现的查…

总结一些vue3小知识3

1.限制时间选择器只能选择后面的日期 说明&#xff1a;disabled-date属性是一个用来判断该日期是否被禁用的函数&#xff0c;接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 <el-date-picker class"w180" v-model"datas.form.timeDate[0]" …

6.6 使用dashboard商城搜索导入模板

本节重点介绍 : 模板商城中搜索模板导入模板修改模板 大盘模板商城地址 免费的 地址 https://grafana.com/grafana/dashboards 搜索模板技巧 详情 导入dashboard 两种导入模式 url导入id导入json文件导入 导入 node_exporter模板 https://grafana.com/grafana/dashboa…

萤石举办2024夏季新品发布会,全力推进“2+5+N”智能家居新生态

7月24日&#xff0c;“智动新生&#xff0c;尽在掌控”2024萤石夏季新品发布会在杭州成功举办。本次发布会上&#xff0c;“智慧生活守护者”萤石深入挖掘应用场景&#xff0c;重磅发布了包括智能健康手表、智能家居AI主机、生态控制器、智家APP等多款创新性的产品及应用&#…

短视频时代,云微客AI批量混剪技术有多厉害?

在数字媒体日益盛行的今天&#xff0c;视频剪辑已经成为了一种热门的技能&#xff0c;加上短视频创作在当下也变得越来越流行&#xff0c;因此云微客短视频AI批量剪辑就显得非常必要。近些年&#xff0c;随着人工智能技术的发展&#xff0c;在很大程度上简化了批量剪辑的过程&a…