运行没有问题,其实就是vetur这个插件不支持vue3的setup语法糖的写法格式了,你只需要停掉现有的vetur,再去下载新的插件TypeScript Vue Plugin (Volar)就可以了,方法如下:
关掉vetur和新安装这两款插件后,一定要重启一下软件,再打开就会发现错误消失了,你可以开开心心的去开发了。
vue3语法糖setup中使用vscode打开,满屏红线报错,‘xxx‘ is declared but its value is never read. Vetur(6133),解决方法
编写vue3代码的时候,引入的组件和定义的变量,在vscode中会出现红色波浪线,虽然不影响运行,但是看着很别扭,应该怎么处理那
代码存在
语法
错误(错误并不影响项目的编译运行),并且校验功能是开启状态就会出现下滑
红线
的
报错
。1)关闭校验2) 逐个
解决
语法
错误类型“
xxx
”不存在“
xxx
”属性
解决
思路:对对应类型进行声明时增加一个any属性
具体例子:类型"res"不存在"data"属性
解决
方法
:将原本的let res ->let res:any已声明"
xxx
",但从未读取其值
解决
思路:删除或注释掉
报错
变量(该变量未被
使用
)类型"
xxx
"的参数不能赋值给类型"
xxx
"参数
1、在写 js 代码
中
,创建新的元素标签可能会遇到下面一种情况,告诉我们这个标签元素已声明,但从未读取其值,我们点击下面的快速修复,它又会把这行代码删除。
2、这其实不是代码出现错误问题了,只不过是我们没有调用这个标签元素,只需要在后面的代码
中
使用
这个元素标签,它就会恢复正常。
众所周知
vue
3支持多个根节点,但在
vscode
中
eslint检查会针对多根节点
报错
。虽然不影响
使用
,但看着很不舒服:
The template root requires exactly one element.
fix
方法
项目根目录下.
vscode
目录,有一个settings.json的文件(如果没有则新建之)
加入一行:"
vetur
.validation.template": f...
在
Vue
3.0
中
,
使用
`defineEmits`来定义组件的emits选项,而不是在组件
中
直接声明`emits`选项。
如果您想手动触发一个事件,可以
使用
`$emit`
方法
。例如,如果您有一个名为`my
Eve
nt`的事件,您可以在组件
方法
中
使用
`this.$emit('my
Eve
nt', data)`来手动触发它。
以下是一个示例组件,展示如何在
Vue
3.0
中
使用
`defineEmits`和`$emit`:
```typescript
import { defineComponent } from '
vue
';
export default defineComponent({
emits: ['my
Eve
nt'],
methods: {
handleClick() {
// 在此处手动触发my
Eve
nt事件
this.$emit('my
Eve
nt', {
eve
ntData: 'example data' });
template: `
<button @click="handleClick">Click me</button>
请注意,在组件
中
使用
`this.$emit`之前,必须将事件名称添加到`emits`选项
中
。
vue3语法糖setup中使用vscode打开,满屏红线报错,‘xxx‘ is declared but its value is never read. Vetur(6133),解决方法