代码编织梦想

实践方案

  • 问题原因:Vue3并没有对自定义全局组件做TS类型支持处理,而是把这个功能转交Volar实现
  • 实现原理:利用TypeScript模块扩充技术,对全局组件的类型进行扩充,从而实现对新注册全局组件的类型保护
  • 实现步骤:①声明一个的*d.ts类型文件 ②对类型接口进行类型模块扩充并导出

参考Volar文档 定义全局组件:使用GlobalComponents类型接口声明类型

// components.d.ts
import Button from './Button/index.vue';
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    // 组件名: Button组件数据
    DemoButton: typeof Button;
  }
}
export {};

简评:Volar官方全局组件的推荐写法,基于Volar,必须安装该插件,GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口

原文地址:https://juejin.cn/post/7066730414626308103

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lijiahui_/article/details/138866112

vue3+ts+vant3+pinia(h5端)配置教程_nanchen_42的博客-爱代码爱编程

Vue 3 + TypeScript + Vite + Pinia (H5端) 该模板将帮助您开始使用Vue 3、Vite3.0中的TypeScript以及Pinia、Vant3进行开发。该模板使用Vue3,请查看文档了解

关于vue3+ts的公共组件库的类型处理_hjxhjx-的博客-爱代码爱编程

全局注册组件 1.新建文件components/index.ts import type { App, Plugin } from 'vue'  //这里的是插件的类型 import Skeleton from './Skeleton/Skeleton.vue' const UserUI: Plugin = {   install(app: App)

搭建 vite + vue3 + ts + pinia 项目框架-爱代码爱编程

一、创建项目 1. 安装vite npm i vite -g 2. 创建项目 一步创建 # npm 6.x npm create vite@latest my-vue-app --template vue-ts ​ # npm 7+, extra double-dash is needed: npm create vite@latest my

vite+vue3+ts项目创建及基本环境搭建_ts创建 vue-爱代码爱编程

1.vite项目搭建 可以按照vite官网操作:https://cn.vitejs.dev/guide/features.html#typescript npm create vite@latest 自定义templ

vite创建vue3+ts+pinia+vant项目起步流程_创建一个vue3tspinia项目-爱代码爱编程

pnpm介绍&安装 本质上他是一个包管理工具,和npm/yarn没有区别,主要优势在于 包安装速度极快磁盘空间利用效率高 安装: npm i pnpm -g 使用: npm命令pnpm等效npm ins

vue3 + vite + ts + router搭建项目-爱代码爱编程

1、新建文件夹         从新建的文件夹cmd进入终端          2、安装vite—依据vite创建vue3项目         2.1、运行 npm init vite@latest         2.2.1、输入项目名称         2.2.2、选择vue 2.2.3、选择TypeScript语言 3

vue3+vite+ts+pinia+elementplus+router+axios创建项目_搭建vue3+ts+elementplus项目-爱代码爱编程

目录 初始项目组成1. 创建项目1.1 下载项目依赖1.2 项目自动启动1.3 src 别名设置vite.config.ts配置文件tsconfig.json配置若新创项目ts提示 1.4 运行测试

前端vue架构-爱代码爱编程

1 理解: 创建视图的函数(render)和数据之间的关联; 当数据发生变化的时候,希望render重新执行; 监听数据的读取和修改; defineProperty:监听范围比较窄,只能通过属性描述符去监听已

vue3选项式和组合式生命周期说明-爱代码爱编程

生命周期:composition 生命周期先后顺序为: setup -beforeCreate和created的统称,只在composition里面取消这两个,可以在这里进行数据请求 onBeforeMount-挂载前,可以请求后台数据 onMounted-挂载,可以获取DOM实例 onBeforeUpdate-更新前,可以在此更改数据 onU

how -爱代码爱编程

一、背景 在 HOW - Canvas 入门系列之表格绘制工具(二) 中我们介绍过基于原生 Canvas 实现表格绘制,并支持如下能力: 绘制表格数据并填充单元格内容单元格点击触发事件支持动态调整列宽 今天我们将将基于

web转flutter基础学习笔记(内含vue和flutter对比)-爱代码爱编程

一、Widget简要概括 如果说Vue的UI是template包裹的一个个组件 那么Flutter的UI就是baseBuild中return出来的嵌套罗列的widget StatelessWidget 用

vue3+ts开发干货笔记_vue3 ts-爱代码爱编程

总结一下在vue3中ts的使用。当篇记录部分来自于vue官网,记录一下,算是加深印象吧。 纯干笔记,不断补充,想到什么写什么,水平有限,欢迎评论指正! 另外,如果想了解更多ts相关知识,可以参考我的其他笔记: TSCon