Vite按需引入自定义组件unplugin-vue-components

2023-11-03

1.安装插件

npm i unplugin-vue-components -D

2.vite.config.ts文件加如下代码

 plugins: [
    vue({
        reactivityTransform: true
    }),
    Components({
        extensions: ['vue', 'md'],
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        dts: 'src/components.d.ts',
        deep: true, // 搜索子目录
        dirs: ['src/components'], // 按需加载的文件夹
    }),
}

3.tsconfig.json   include属性加入 ‘./components.d.ts’

 目录里面会多一个文件

然后你在 components 里面封装组件就是全局组件了

我一开始是 先封装完组件然后 在配置的上面这些,就一直不显示 全局组件 ,然后你可以先把你封装的文件删除,然后在新建一次就好了

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vite按需引入自定义组件unplugin-vue-components 的相关文章

随机推荐

  • vue2.x自定义v-loading指令

    vue3 x自定义v loading思路类似 directive js import Loading from loading import Vue from vue const loadingDirective inserted el b
  • 排查Javascript内存泄漏案例(一)

    Chrome DevTools里的Performance面板和Memory面板可以用来定位内存问题 如何判断应用发生内存泄漏 为了证明螃蟹的听觉在腿上 一个专家捉了只螃蟹并冲它大吼 螃蟹很快就跑了 然后捉回来再冲它吼 螃蟹又跑了 最后专家把
  • Linux 创建用户并限制其访问目录,设置密码为永不过期

    创建用户及访问目录 useradd sou d tmp sou M 设置用户密码 passwd sou Tip 输入命令后 会提示输入密码 修改密码为永不过期 chage M 99999 sou 将访问目录和所有子目录权限全部赋予用户 ch
  • 十二、Linux系统中的软件管理

    十二 Linux 系统中的软件管理 rpm dnf命令 软件仓库的搭建 12 1 Linux中软件包的类型 1 DEB UBlinux DEBlinux 2 RPM redhat centOS fadora 3 bz2 gz xz 1 需要
  • Linux root用户使用普通用户的conda环境的方法

    1 使用root用户登录 2 假设普通用户为new user conda环境安装在new user用户目录下 则可以使用如下命令激活conda环境 source home new user miniconda3 bin activate 激
  • 联想小新I1000 win10电脑系统安装教程

    最近因为之前电脑太卡了 想要给自己的联想小新重装系统 发现网上说采用以下方式安装的win10系统会更干净一些 过程做以下记录 联想小新 win10电脑系统安装教程 1 制作系统安装盘 1 1 准备U盘以及一台用来制作安装盘的电脑 1 2 下
  • 通过遍历,找到链表中最后一个结点

    通过遍历 找到链表中最后一个结点 首先创建一个链表 然后再找到链表的最后一个结点 代码实例 class Node public int val public Node next public Node int val this val va
  • ffmpeg将连续的h264分割为单帧

    http ffmpeg org doxygen trunk decode video 8c example html FFmpeg Main Page Related Pages Modules Namespaces Data Struct
  • ELK高级搜索四之Mapping映射

    目录 Mapping映射入门 什么是mapping映射 内置映射类型 keyword 使用 创建Mapping 新增数据 查询测试 属性介绍 store使用 创建索引 动态映射dynamic mapping 手动创建映射 查询映射 映射测试
  • “我永远都无法理解人类!” OpenAI “杀”死了那个成功模拟已故未婚妻的 GPT-3 机器人

    逝者已矣 生者如斯 意为死去的人已离我们而去 活着的人要好好生活 可人非圣贤 明知不可拘泥于过去 却总会在深夜不禁回想起过往的美好 并在心里说一句 我真的好想你 但已故之人如何能听到 只能天一亮 便压下心中思念 再次开启新的一天 如此日复一
  • MySQL存储函数和存储过程的区别

    存储过程与存储函数的区别 1 存储函数和存储过程统称为存储例程 store routine 存储函数的限制比较多 例如不能用临时表 只能用表变量 而存储过程的限制较少 存储过程的实现功能要复杂些 而函数的实现功能针对性比较强 2 返回值不同
  • 二维码原理、制作和识别

    参考 二维码 QR code 基本结构及生成原理 附标准下载 二维码到底是怎么被识别的 黑白小方块又是怎么储存数据的 一 矩阵式二维条码QR 矩阵式二维条码 又称棋盘式二维条码 QR码的设计理念之一就是尽可能地容错和自适应 它是在一个矩形空
  • Actix Web & SQLx 搭建 Web 后端服务

    本文代码 https github com tothis rust record tree main test actix web 已集成功能 log4rs 集成 SQLx 集成 Actix Web CRUD Cargo toml pack
  • 物联网开发119 - Micropython ESP32 C3连接人体红外感应模块HC-SR505

    一 目的 这一节我们来学习如何使用合宙ESP32 C3 连接人体红外感应模块HC SR505 下面我们一起来学习一下吧 二 环境 ESP32 C3开发板 MicroPython v1 19 1 on 2022 06 18 人体红外感应模块H
  • win10 进不去桌面 卡在输入密码界面

    重启进入安全模式 怎么进安全模式自己百度 然后在安全模式内右键左下角win键 点击运行 输入 netsh winsock reset catalog 然后重启 ok
  • 虚拟机域环境搭建

    环境描述 域控 DNS服务器 windows server 2008 R2 IP 10 1 1 11 域成员1 windows 7 IP 10 1 1 22 域成员2 windows server 2003 IP 10 1 1 33 域控
  • 解决pip卸载安装包的时候,需要确认,pip3.7 uninstall paddle-serving-server-gpu -y

    pip3 7 uninstall paddle serving server gpu y root 532c09626af3 deploy pip3 7 uninstall paddle serving app Found existing
  • C++ 常用的八种排序方法

    C 常用的八种排序方法 稳定性 排序后 2 个相等键值的顺序和排序之前它们的顺序相同 插入排序 思想 类似打扑克时的排序方法 将第一待排序序列第一个元素看做一个有序序列 把第二个元素到最后一个元素当成是未排序序列 从头到尾依次扫描未排序序列
  • (React入门)组件、组件样式、事件处理

    组件的创建 类组件 类组件 顾名思义 也就是通过使用ES6类的编写形式去编写组件 该类必须继承React Component如果想要访问父组件传递过来的参数 可通过this props的方式去访问 在组件中必须实现render方法 在ret
  • Vite按需引入自定义组件unplugin-vue-components

    1 安装插件 npm i unplugin vue components D 2 vite config ts文件加如下代码 plugins vue reactivityTransform true Components extension