WebStorm无法正确识别Vue3组合式API的解决方案


Posted in Vue.js onFebruary 18, 2021

1 问题描述

Vue3的组合式API无法在WebStorm中正确识别,表现为defineComponent等无法被识别:

WebStorm无法正确识别Vue3组合式API的解决方案

2 尝试方案

猜想这种问题的原因是无法正确识别对应的Vue3库,笔者相信WebStorm是可以做到的,只是某些配置没有正确,笔者尝试过在设置的Libraries中勾选上node_modules,但是没有效果。

WebStorm无法正确识别Vue3组合式API的解决方案

3 解决办法

最终的解决办法参考了此处(图源):

WebStorm无法正确识别Vue3组合式API的解决方案

选择node_modules文件夹,右键选择Mark Directory as,最后选择Not Excluded即可。

之后会花费一段时间索引,等待完成即可。

WebStorm无法正确识别Vue3组合式API的解决方案

4 一些思考

看了一下WebStorm的文档,项目中的文件夹总共分为四类:

  • Source:默认选项,所有文件夹默认都被视为Source除非设置为了Tests/Resource Root/Excluded
  • Tests:标记为测试的文件夹
  • Resource Root:资源文件夹,在输入某些需要资源的代码时,比如![](xxxx>),会自动提示该文件夹路径下的资源文件
  • Excluded:代码补全、代码导航等会忽略的文件夹。这个选项能提高WebStorm性能

在设置中搜索Directories可以发现node_modules默认是Excluded:

WebStorm无法正确识别Vue3组合式API的解决方案

标记为Not Excluded后,就不是红色了:

WebStorm无法正确识别Vue3组合式API的解决方案

因此解决并不难,只是无法正确识别的原因。

以上就是WebStorm无法正确识别Vue3组合式API的解决方案的详细内容,更多关于WebStorm无法正确识别Vue3组合式API的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
详解Vue router路由
Nov 20 Vue.js
如何在 Vue 中使用 JSX
Feb 14 #Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 #Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 #Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
详解Vue的七种传值方式
Feb 08 #Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
You might like
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
解析isset与is_null的区别
2013/08/09 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python使用scrapy解析js示例
2014/01/23 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
社区文明倡议书
2015/04/28 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
python运行脚本文件的三种方法实例
2022/06/25 Python
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技