vue3学习——自定义插件,注册组件(引入vue文件报红线)

在src/components文件夹目录下创建一个index.ts文件

import { App, Component } from 'Vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import Pagination from '@/components/Pagination/index.vue'
const globalComponents: { [name: string]: Component } = { SvgIcon, Pagination }
export default {
  install(app: App) {
  	// 遍历注册每一个组件
    Object.keys(globalComponents).forEach((key) => {
      app.component(key, globalComponents[key])
    })
  },
}

main.ts

// SVG图标引入(插件来注册组件,也不要删除这句!!!)
import 'virtual:svg-icons-register'
// 引入插件:注册全局组件
import gloablComponent from './components/index';
// 使用
app.use(gloablComponent);

遇到的问题

引入vue文件报红线:Cannot find module ‘@/views/xxx.vue‘ or its corresponding type declarations

在这里插入图片描述

解决: 本目录创建env.d.ts文件

// 因为ts只能解析 .ts 文件,无法解析 .vue文件
declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL进阶之锁(表级锁,元数据锁,意向锁)

表级锁 介绍 表级锁&#xff0c;每次操作锁住整张表。锁定粒度大&#xff0c;发生锁冲突的概率最高&#xff0c;并发度最低。应用在MyISAM、 InnoDB、BDB等存储引擎中。 对于表级锁&#xff0c;主要分为以下三类&#xff1a; 表锁 元数据锁&#xff08;meta data lock&…

【计网·湖科大·思科】实验七 路由信息协议RIP、开放最短路径优先协议OSPF、边界网关协议BGP

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

GPIO中断

1.EXTI简介 EXTI是External Interrupt的缩写&#xff0c;指外部中断。在嵌入式系统中&#xff0c;外部中断是一种用于处理外部事件的机制。当外部事件发生时&#xff08;比如按下按钮、传感器信号变化等&#xff09;&#xff0c;外部中断可以立即打断正在执行的程序&#xff0…

嵌入式学习第三篇——51单片机

目录 1&#xff0c;嵌入式系统 1&#xff0c;嵌入式系统的定义 2&#xff0c;单片机的定义 2&#xff0c;51单片机 1&#xff0c;开发环境 2&#xff0c;开发板使用的基本思路 1&#xff0c;查看原理图&#xff0c;查看芯片手册 2&#xff0c;获得调用硬件的管…

虫情监测设备能够自动识别病虫害

TH-CQ3S虫情监测设备的工作原理主要是通过高清摄像头拍摄农田的实时图像&#xff0c;利用图像识别技术对图像中的病虫害进行自动识别。一旦发现病虫害&#xff0c;设备会自动发出警报&#xff0c;并通过手机APP通知农民。农民可以根据设备提供的预测预报&#xff0c;及时采取防…

django+flask警务案件信息管理系统python-5dg53-vue

1&#xff09;用户在后台页面各种操作可及时得到反馈。 &#xff08;2&#xff09;该平台是提供给多个用户使用的平台&#xff0c;警员使用之前需要注册登录。登录验证后&#xff0c;警员才可进行各种操作[10]。 &#xff08;3&#xff09;管理员用户拥有信息新增&#xff0c;修…

CentOS 8 下载

https://mirrors.bfsu.edu.cn/centos/8-stream/isos/x86_64/ 下载地址&#xff1a; https://mirrors.bfsu.edu.cn/centos/8-stream/isos/x86_64/CentOS-Stream-8-x86_64-latest-dvd1.iso

2024最新版Sublime Text 4安装使用指南

2024最新版Sublime Text 4安装使用指南 Installation and Usage Guide to the Latest Sublime Text 4 in 2024 By JacksonML 0. Sublime Text是什么&#xff1f; Sublime Text 由自定义组件构建&#xff0c;支持Python, Java, C/C等多种编程语言&#xff0c;并为用户提供无与…

学成在线: 新增/修改课程计划

新增/修改课程计划(同接口) 界面原型 第一步: 在课程计划界面,点击添加章新增第一级课程计划,点击添加小节可以向某个第一级课程计划下添加小节 新增章/节成功后会自动发起请求刷新课程计划列表并且把新增的课程计划信息添加到数据库当中,新增的课程计划自动排序到最后 第二…

命令注入漏洞原理以及修复方法

漏洞名称 &#xff1a;命令注入 漏洞描述&#xff1a;Command Injection&#xff0c;即命令注入攻击&#xff0c;是指由于Web应用程序对用户提交的数据过滤 不严格&#xff0c;导致黑客可以通过构造特殊命令字符串的方式&#xff0c;将数据提交至Web应用程序中&#xff0c;并利…

【Java程序设计】【C00191】基于SSM的线上鲜花商城管理系统(论文+PPT)

基于SSM的线上鲜花商城管理系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的线上鲜花商城的管理系统 本系统分为前台用户和后台管理员2个功能模块。 前台用户&#xff1a; 当游客打开系统的网址后&#xff0c;首先看…

032 数组

数组的定义 声明和创建 // 声明数组并开辟内存空间 int[] nums new int[10]; // 为数组赋值 nums[0] 1; nums[1] 2; nums[2] 3; nums[3] 4; nums[4] 5; nums[5] 6; nums[6] 7; nums[7] 8; nums[8] 9; nums[9] 10; // 累加和 int sum 0; for (int num : nums) {sum …

elementUI中el-tree组件单选没有复选框时,选中、current-node-key高亮、刷新后保留展开状态功能的实现

目录 一、代码实现1. 属性了解 &#xff08;[更多](https://element.eleme.cn/#/zh-CN/component/tree)&#xff09;2. 实现步骤3.代码示例 二、 效果图 一、代码实现 1. 属性了解 &#xff08;更多&#xff09; node-key 每个树节点用来作为唯一标识的属性&#xff0c;整棵树…

[云顶数模]2024美赛CEF题成品参考论文+配套数据集+可执行代码+运行结果图

E题社区抗灾能力综合评估与决策模型研究 摘要&#xff1a;社区抗灾能力的提升对于灾害风险管理至关重要。本研究基于机器学 习方法&#xff0c;构建了社区抗灾能力预测模型&#xff0c;以评估社区在灾害事件中的表现。首先&#xff0c; 我们采用梯度提升树模型对社区基础设施、…

正则表达式(RE)

什么是正则表达式 正则表达式&#xff0c;又称规则表达式&#xff08;Regular Expression&#xff09;。正则表达式通常被用来检索、替换那些符合某个规则的文本 正则表达式的作用 验证数据的有效性替换文本内容从字符串中提取子字符串 匹配单个字符 字符功能.匹配任意1个…

10个常考的前端手写题,你全都会吗?(上)

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热爱技术和分享&#xff0c;欢迎大家交流&#xff0c;一起学习进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 今天来分享一下10个常见的JavaScript手写功能。 目录 1.实现new 2.call、apply、…

一篇文章认识Vue3

Vue 3 介绍 Vue3 于 2022 年 2 月 7 日星期一成为新的默认版本&#xff01; Vue3 性能更高&#xff0c;体积更小 Vue3 在经过一年的迭代后&#xff0c;越来越好用。 官方文档&#xff1a; vue3官方文档&#xff1a; vuejs.org/ [1] vue3中文文档&#xff1a; v3.cn.vuejs.org/ …

数据结构-day7

二叉树创建、遍历、计算结点、计算深度 head.h #include<stdio.h> #include<stdlib.h> #include<string.h>typedef char datatype; typedef struct Btree{datatype data;struct Btree *lchild;struct Btree *rchild; }*btree;btree create(); void insert_…

【数据结构】双向链表 超详细 (含:何时用一级指针或二级指针;指针域的指针是否要释放)

目录 一、简介 二. 双链表的实现 1.准备工作及其注意事项 1.1 先创建三个文件 1.2 注意事项&#xff1a;帮助高效记忆 1.3 关于什么时候 用 一级指针接收&#xff0c;什么时候用 二级指针接收&#xff1f; 1.4 释放节点时&#xff0c;要将节点地址 置为NULL&#xff0…

如何过滤离线logcat日志文件?

1.需求&#xff1a; How did Android Studio Logcat to read the files which have save in logcat? I saved some logs and would like to open them with Android Studio - Logcat interface and be able to see the colours and apply some filters just as if the pho…