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

vue2实现组件库的自动按需引入,unplugin-auto-import,unplugin-vue-components

1.使用ant-design-vue或者element-ui时,如何每个组件都去import导入组件,大大降低了开发效率,如果全局一次性注册会增加项目体积,那么如何实现既不局部引入,也不全局注册?

2.在element-plus官网看到有说明

3.那么在webpack中也是可以使用的,下载unplugin-auto-import,unplugin-vue-components两款插件

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

4.在vue.config.js中配置

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { AntDesignVueResolver } = require('unplugin-vue-components/resolvers');AutoImport({imports: ['vue', 'vue-router'],resolvers: [AntDesignVueResolver()],}),Components({resolvers: [AntDesignVueResolver()],}),

5.在项目中使用

<template><div id="app"><!-- <router-view></router-view> --><a-button>按钮</a-button><a-divider /></div>
</template><script>
export default {name: 'App',
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

6.发现报错:AutoImport is not a function,打印AutoImport发现是个对象,AutoImport.defalut才是函数,更改下vue.config.js配置

AutoImport.defalut({imports: ['vue', 'vue-router'],resolvers: [AntDesignVueResolver()],}),Components.defalut({resolvers: [AntDesignVueResolver()],}),

7.运行项目还是报错
Module build failed (from ./node_modules/.pnpm/unplugin@2.2.0/node_modules/unplugin/dist/webpack/loaders/transform.js): Error [ERR_REQUIRE_ESM]: require() of ES Module

发现插件用的是es语法,而我们用的是commonjs语法,如何解决?降低插件版本
 

"unplugin-auto-import": "0.16.0","unplugin-vue-components": "0.22.0",

8.运行之后发现没报错了,完美解决

9.经过测试,发现在使用a-layout、a-layout-sider组件时,报错:ant-design-vue并没有抛出a-layout-sider,控制台也输出了全部抛出的组件,发现并没有抛出a-lay-sider,包括a-layout-header、a-layout-content、a-layout-footer,去node_modules下查看a-design-vue源码,发现只抛出了a-layout组件,其他四个是通过vue.component全局注册的,所以ant-design-vue不适合用unplugin-auto-import,换成element-ui试下,测试el-menu、el-sub-menu、el-menu-item是否会出现同样的问题呢?

10.经过测试element-ui不会报错,查看源码发现element-ui抛出了所有的组件,比如el-menu、el-menu-item、el-sub-menu,所以想要使用unplugin-auto-import只能使用element-ui。

相关文章:

vue2实现组件库的自动按需引入,unplugin-auto-import,unplugin-vue-components

1.使用ant-design-vue或者element-ui时&#xff0c;如何每个组件都去import导入组件&#xff0c;大大降低了开发效率&#xff0c;如果全局一次性注册会增加项目体积&#xff0c;那么如何实现既不局部引入&#xff0c;也不全局注册&#xff1f; 2.在element-plus官网看到有说明…...

C++第十节:map和set的介绍与使用

【本节要点】 1.关联式容器2.键值对3.map介绍与使用4.set介绍与使用5.multimap与multisedd的介绍与使用 一、关联式容器&#xff1a;数据管理的核心利器 关联式容器是STL中用于高效存储和检索键值对&#xff08;key-value pair&#xff09;的数据结构&#xff0c;其底层基于红黑…...

线性代数笔记28--奇异值分解(SVD)

1. 奇异值分解 假设矩阵 A A A有 m m m行 n n n列 奇异值分解就是在 A A A的行向量上选取若干对标准正交基&#xff0c;对它作 A A A矩阵变化并投射到了 A A A的列空间上的正交基的若干倍数。 A v → u → σ u → ∈ R m v → ∈ R n A\overrightarrow{v}\overrightarrow{u…...

【从零开始学习计算机科学】硬件设计与FPGA原理

硬件设计 硬件设计流程 在设计硬件电路之前,首先要把大的框架和架构要搞清楚,这要求我们搞清楚要实现什么功能,然后找找有否能实现同样或相似功能的参考电路板(要懂得尽量利用他人的成果,越是有经验的工程师越会懂得借鉴他人的成果)。如果你找到了的参考设计,最好还是…...

项目中同时使用Redis(lettuce)和Redisson的报错

温馨提示&#xff1a;图片有点小&#xff0c;可以放大页面进行查看... 问题1&#xff1a;版本冲突 直接上图&#xff0c;这个错表示依赖版本不匹配问题&#xff0c;我本地SpringBoot用的是2.7&#xff0c;但是Redisson版本用的3.32.5。 我们通过点击 artifactId跟进去 发现它…...

leetcode-数组

26. 删除有序数组中的重复项 已解答 简单 相关标签 相关企业 提示 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 n…...

人工智能里的深度学习指的是什么?

深度学习&#xff08;Deep Learning, 简称DL&#xff09;是机器学习领域的一个重要分支&#xff0c;它通过构建和训练深层神经网络模型&#xff0c;从大量数据中自动学习和提取特征&#xff0c;以实现复杂任务的自动化处理和决策。以下是关于深度学习的详细介绍&#xff1a; 一…...

docker本地部署ollama

启动ollama容器 1.使用该命令启动CPU版运行本地AI模型 docker run -d -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama 2.此命令用于启动GPU版本运行AI模型 前提是笔记本已配置NVIDIA的GPU驱动&#xff0c;可在shell中输入nvidia-smi查看详细情况…...

LangChain构建语言模型驱动应用的强大框架

LangChain 核心功能与组件链&#xff08;Chains&#xff09;记忆&#xff08;Memory&#xff09;提示模板&#xff08;Prompts&#xff09;代理&#xff08;Agents&#xff09;数据检索&#xff08;Indexes&#xff09; 应用场景文档问答自动化工作流知识管理系统 发展历程总结…...

2025-03-08 学习记录--C/C++-PTA 习题10-2 递归求阶乘和

合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于足下。&#x1f4aa;&#x1f3fb; 一、题目描述 ⭐️ 二、代码&#xff08;C语言&#xff09;⭐️ #include <stdio.h>double fact( int n ); double facts…...

浅谈 DeepSeek 对 DBA 的影响

引言&#xff1a; 在人工智能技术飞速发展的背景下&#xff0c;DeepSeek 作为一款基于混合专家模型&#xff08;MoE&#xff09;和强化学习技术的大语言模型&#xff0c;正在重塑传统数据库管理&#xff08;DBA&#xff09;的工作模式。通过结合其强大的自然语言处理能力、推理…...

AI如何重塑运维体系

AI大模型的引入正在从被动响应到主动预防、从经验驱动到数据智能全面重构运维体系。 一、颠覆传统运维模式的技术革新 故障预测&#xff1a;从“救火”到“防火” AI大模型通过整合历史日志、硬件状态、网络流量等多模态数据&#xff0c;结合时间序列分析&#xff08;如LSTM&am…...

linux 内网下载 yum 依赖问题

1.上传系统镜像 创建系统目录&#xff0c;用户存放镜像&#xff0c;如下&#xff1a; mkdir /mnt/iso上传 iso 文件到 /mnt/iso 文件夹下。 2.挂载系统镜像 安装镜像至 /mnt/cdrom 目录中 mount -o loop /mnt/iso/CentOS-7-x86_64-Minimal-xx.iso /mnt/cdrom3.修改yum源配…...

mapbox开发小技巧

自定义图标 // 1、单个图标 const url ./static/assets/symbols/code24x24/VIDEO.png // 图标路径 map.loadImage(url ,(error, image) > {if (error) throw errormap.addImage(video-icon, image) })// 2、雪碧图利用canvas // json和png图片 function getStyleImage(fil…...

DeepSeek×博云AIOS:突破算力桎梏,开启AI普惠新纪元

背景 在全球人工智能技术高速迭代的背景下&#xff0c;算力成本高企、异构资源适配复杂、模型部署效率低下等问题&#xff0c;始终是制约企业AI规模化应用的关键。 DeepSeek以创新技术直击产业痛点&#xff0c;而博云先进算力管理平台AIOS的全面适配&#xff0c;则为这一技术…...

Java高频面试之集合-07

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天来报道了&#xff01;哈哈哈哈哈嗝&#x1f436; 面试官&#xff1a;ArrayList 和 Vector 的区别是什么&#xff1f; ArrayList 与 Vector 的区别详解 ArrayList 和 Vector 都是 Java 中基于…...

Redis- 切片集群

切片集群 切片集群什么是Redis Cluster吗&#xff1f;为什么需要切片集群&#xff1f;Redis Cluster的数据分片机制是怎样的&#xff1f;哈希槽的算法是什么基本算法流程 待填坑 切片集群 什么是Redis Cluster吗&#xff1f;为什么需要切片集群&#xff1f; Redis Cluster是R…...

【项目日记(十)】瓶颈分析与使用基数树优化

前言 上一期我们对整个项目进行了细节部分的优化&#xff0c;并在最后测试了多线程环境下和malloc的性能对比测试&#xff0c;发现malloc有时候还是更胜一筹的&#xff0c;基于此我们进行对我们的内存池进行瓶颈分析与优化。 目录 前言 一、项目瓶颈分析 VS编译器下性能分…...

后台管理系统比较全面的分析对比

以下是主流的 后台管理系统模板 分类与技术选型指南&#xff0c;涵盖开源、商业及全栈解决方案&#xff0c;可根据项目需求灵活选择&#xff1a; 一、开源免费模板 1. React 技术栈 Ant Design Pro 官网&#xff1a;pro.ant.design特点&#xff1a;阿里出品&#xff0c;内置 R…...

HCIA复习拓扑实验

一.拓扑图 二.需求 1.学校内部的HTTP客户端可以正常通过域名www.baidu.com访问到百度网络中HTTP服务器 2.学校网络内部网段基于192.168.1.0/24划分&#xff0c;PC1可以正常访问3.3.3.0/24网段&#xff0c;但是PC2不允许 3.学校内部路由使用静态路由&#xff0c;R1和R2之间两…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...