Vue3 + ts + element-plus全局注册ts不生效解决方法

已于 2023-06-14 08:55:55 修改
阅读量1.1k 收藏
点赞数 1
文章标签： javascript typescript vue vue.js elementui
于 2023-06-14 08:34:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faker55open_/article/details/131199984
版权
本文介绍了在Vue3项目中，结合typescript和element-plus进行全局组件注册后，如何解决TypeScript没有代码提示的问题。通过在tsconfig.json中进行特定配置，可以实现ts的提示效果。
摘要由CSDN通过智能技术生成

在写练手项目时，用到ts和element-plus，将ui组件全局注册后发现无法有ts提示效果，可以尝试以下做法

/// 在main.ts同级处创建components.d.ts 名字任意（必须是d.ts结尾）
export {
   }

declare module 'vue' {
   
  export interface GlobalComponents {
   
	 	ElButton: typeof import("element-plus/es"
最低0.47元/天 解锁文章
mr-sun12123
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue3 + element plus】Icon全局注册组件过程踩坑
StellaXiao98的博客
04-27 2107
过程： 历史项目用的是vue 3.0.0，element plus 1.0.0 参考其他大佬的方法(文末)，全局install并注册了element plus 的 icon 组件库。 npm install @element-plus/icons-vue import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ELIcons from '@element-plus/icons
Vue3+Ts+Elment-plus踩坑
WebCaiNiao_Lcn的博客
03-14 872
Vue3+Ts+Elment-plus踩坑
Vue3注册全局组件不生效问题
weixin_41586389的博客
11-10 3880
Vue3注册全局组件不生效问题 新创建一个项目后，需要注册全局组件，发现页面并没有什么反应，控制台没有报错，但是有个警告 解决办法： 添加vue.config.js文件，添加配置如下： runtimeCompiler: false, //是否使用包含运行时编译器的Vue构建版本 chainWebpack: (config) => { config.resolve.alias .set('vue$', 'vue/dist/vue.esm-bundler.j
找不到“element-plus/global”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 “element-plus/global“ 的
m0_61854711的博客
06-21 6122
找不到“element-plus/global”的类型定义文件
记录 unplugin-vue-components不生效
最新发布
wade3po的博客
06-11 479
我还特地去提了个 issue，结果别人用这个 repo 可以，我就让两三个同事试试，结果惊呆了我，都可以，node 版本一模一样，有一个把整个项目打包给我（包括 node_modules），我的电脑还是不行。之前用 vite + VUE3 + TS 开发了几个项目，最近因为一个新项目，想着升级这些版本，就重新起了一个项目，结果遇到了然自己爆炸的问题。最终结果是我降了版本，v0.26.0 可以，我顺便也去提了 issue，描述了一下跟电脑有关系，结果不知道什么时候可以回复。
Vue开发实例（06）之Vue3注册Element-ui报错解决
编程界明世隐的博客
03-21 1万+
Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') at eval (webpack-internal:///./node_modules/element-ui/lib/utils/types.js:39) at Object../node_modules/element-ui/lib/utils/types.js (chunk-vendors.js:2923) at __webp
使用element-plus按需引入后ElMessageBox样式丢失的问题
XUELINGMM的博客
05-18 2858
vue3项目中使用element-plus按需引入遇到ElMessageBox样式丢失。
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue3在安装element-plus后使用官网提供的自动导入组件在webpack 下报错
qq_45404003的博客
06-21 2612
版权声明：本文为CSDN博主「Technology_hands」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/Technology_hands/article/details/128719150。最后发现问题是 elment plus 和 自动加载方法 的版本不适应的问题。您需要使用额外的插件来导入要使用的组件。plus 这行代码的时候 出现了报错。解决方法是 根据视频增加精确版本的包。解决方法：切换至更高版本的。
解决vite+TS中使用element-plus你可能遇到的各种问题
老司机的后备箱
09-13 3916
尽管官网也有讲,但"每个人都有不同的境遇,我们不一样…"
vue3报错：找不到模块“element-plus”或其相应的类型说明
热门推荐
TangJing_的博客
08-12 2万+
vue3报错：找不到模块“element-plus”或其相应的类型说明
vite + vue + ts 自动按需导入 Element Plus组件，并如何解决按需引入后ElMessage与ElLoading 的问题（找不到名称“ElMessage”问题。）
weixin_59916662的博客
10-15 1万+
自动导入element-puls组件，以及按需引入后ElMessage与ElLoading的问题。两步优雅解决找不到名称“ElMessage”问题，
Vue组件失效（全局组件注册成功但未生效，非命名问题）
qq_41422946的博客
10-29 8115
最近在写一个vue的项目，发现写好组件并引入之后标签没有任何效果，也没有报错。 我们先看一下我的vue实例： var actDoubleEleven = new Vue({ el: "#actDoubleEleven", data: { }, methods: { }, created: function () { var ...
vue3+ts报错“ xxx“ is declared but its value is never read
weixin_44090753的博客
09-02 1万+
vue3+ts报错is declared but its value is never read
Vue3.0+TS+Element-plus实现(若依版后台管理系统)
web13595883101的博客
02-21 1820
附上源码地址: Vue3.0+TS+Element-plus 后台管理系统模板 准备工作 安装vue3.0，npm create vue3-project 选中这几项即可，不需要vuex, 我们自己封装状态管理。 setup函数使用 在.vue文件中, script 标签下代码都必须带有lang=“ts”。关于setup函数调用时间是在vue2的create之前触发，其他的生命周期相信大家都有所了解，这里就不做赘述了。setup有两种写法 ， 常规写法 <script lang="ts"> i
element plus自动导入没有类型提示
记录学习前端的历程
07-01 666
在tsconfig.app.json文件中自动导入时自动生成的文件。
vue3+ts 自定义指令修改dom样式 执行了 但初始化页面样式没有生效
06-09
在 Vue3 中，自定义指令的钩子函数与 Vue2 有所不同，其中 `bind` 钩子已经被废弃，取而代之的是 `beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount`、`unmounted` 等钩子函数，它们的执行时机也有所不同。 如果你在 `mounted` 钩子中修改 DOM 样式，那么样式修改会在组件挂载到页面后才生效。如果你希望样式修改能够在页面初始化时就生效，可以考虑在 `beforeMount` 钩子中执行修改操作。例如： ```typescript import { DirectiveBinding } from 'vue'; // 定义自定义指令 const myDirective = { beforeMount(el: HTMLElement, binding: DirectiveBinding) { // 修改 DOM 样式 el.style.color = binding.value; } }; // 在组件中使用自定义指令 <template> <div v-my-directive="color">Hello World</div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ data() { return { color: 'red' }; }, directives: { myDirective } }); </script> ``` 注意，在使用 TypeScript 时需要引入 `DirectiveBinding` 类型，并在自定义指令的参数中使用该类型，否则会报错。另外，如果你在自定义指令中使用了异步操作，例如发送网络请求等，建议在 `mounted` 钩子中执行，以确保 DOM 已经渲染完毕。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值