在 Vue 2 / Nuxt / Typescript / @nuxtjs-composition-api 项目中使用 VSCode Volar 扩展

Posted 2023-02-22

【中文标题】在 Vue 2 / Nuxt / Typescript / @nuxtjs-composition-api 项目中使用 VSCode Volar 扩展

【英文标题】：Use of VSCode Volar extension for a Vue 2 / Nuxt / Typescript / @nuxtjs-composition-api project

【发布时间】：2021-11-29 02:37:03

【问题描述】：

我正在尝试设置 Volar VSCode 扩展以使用 NuxtJS / Typescript 项目。我目前在我的 .vue 文件模板中面临这两个问题。 我遵循了 Vue 2 和 Typescript 的 installation recommendations 并启用了 Take Over mode。

我已经设法通过扩展解决了我的代码库中发生的一些问题，但这两个问题仍然存在。

Vue 3 弃用警告

(deprecation COMPILER_V_ON_NATIVE) .native modifier for v-on has been removed as is no longer necessary.
  Details: https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.htmlvue(COMPILER_V_ON_NATIVE)

我想找到一种方法来消除这些警告，因为我仍在使用 Vue 2（NuxtJS 尚不兼容 Vue 3）。

自定义事件处理程序，例如我在自定义<Modal> 组件上有此事件处理程序。

@modal-confirmation="onModalConfirmed"

const onModalConfirmed = (modalConfirmation: ModalConfirmation) => ;

Type '(modalConfirmation: ModalConfirmation) => void' is not assignable to type '(...payload: unknown[]) => unknown'.
  Types of parameters 'modalConfirmation' and 'payload' are incompatible.ts(2322)

以前有人经历过这个过程吗？

【问题讨论】：

github.com/johnsoncodehk/volar/issues/576

介意在此处粘贴 johnson 的答案（出于长寿的原因）并接受您自己的答案吗？我可以自己做，但不想培养代表。

@walnut_salami 完成！

【参考方案1】：

根据Volar's GitHub上的@johnsoncodehk：

我想找到一种方法来消除这些警告，因为我还在 使用 Vue 2（NuxtJS 尚不兼容 Vue 3）。

我们需要为此更改experimentalCompatMode 选项，但此选项的设计行为尚未最终确定。所以短时间内不会变。

@vue/composition-api 事件类型已在 953cb2d 中修复。