如何在带有 Typescript 的视图中使用 Vue 单文件组件？

Posted 2023-02-16

【中文标题】如何在带有 Typescript 的视图中使用 Vue 单文件组件？

【英文标题】：How do I use a Vue single file component in a view with Typescript?

【发布时间】：2020-12-01 16:23:05

【问题描述】：

我尝试了很多方法，但总是遇到某种构建或运行时错误。经过大量搜索后，我无法找到有关此的工作示例或帖子，对此我感到有些惊讶。我使用 Vue UI 使用 Typescript 创建了一个新项目，然后创建了以下组件：

<template>
  <div class="navigation">
    BACK | NEXT buttons go here
  </div>
</template>

<script lang="ts">
import  Component, Vue  from "vue-property-decorator";

@Component
export default class BackNext extends Vue 

</script>

接下来，我尝试在 .vue 视图文件中使用该组件，这与我得到的结果差不多：

<template>
  <div class="question">
    <h1>Personal</h1>
    <back-next />
  </div>
</template>
<script lang="ts">
import  Component, Vue  from "vue-property-decorator";
import BackNext from "../../components/BackNext.vue";
@Component
export default class Personal extends Vue 
  components = 
    'back-next': BackNext
  

</script>

但这会失败并出现以下构建错误：

 ERROR  Failed to compile with 11 errors4:22:27 PM

These dependencies were not found:

* core-js/modules/es.object.get-prototype-of in ./node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
* core-js/modules/es.object.to-string in ./node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js, ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.reflect.construct in ./node_modules/@babel/runtime/helpers/esm/createSuper.js, ./node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
* core-js/modules/es.regexp.to-string in ./node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
* core-js/modules/es.string.iterator in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.symbol in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.symbol.description in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/es.symbol.iterator in ./node_modules/@babel/runtime/helpers/esm/typeof.js
* core-js/modules/web.dom-collections.iterator in ./node_modules/@babel/runtime/helpers/esm/typeof.js

To install them, you can run: npm install --save core-js/modules/es.object.get-prototype-of core-js/modules/es.object.to-string core-js/modules/es.reflect.construct core-js/modules/es.regexp.to-string core-js/modules/es.string.iterator core-js/modules/es.symbol core-js/modules/es.symbol.description core-js/modules/es.symbol.iterator core-js/modules/web.dom-collections.iterator

目前尚不清楚启用 Typescript 支持的标准新项目是否需要安装一堆依赖项才能使用一些非常标准的功能，我不想通过安装一堆进一步搞砸我的项目可能需要也可能不需要的东西。

npm 版本 6.13.4

节点版本 12.16.1

纱线版本​​ 1.22.4

vue 版本@vue/clu 4.5.3

【问题讨论】：

“.view 文件” ????那不应该是.vue 文件吗？

在他们当前的问题列表中看不到类似的内容。你试过可信赖的老rm -r node_modules package-lock.json && npm install吗？

我的意思是 .vue 视图文件。该项目是一个 SPA，页面位于 view 子目录中。

在运行yarn install之前，您是否删除了package-lock.json和node_modules？

这是 yarn.lock 文件，在删除并运行 yarn install npm run serve 后可以工作。谢谢！

【参考方案1】：

需要在装饰器中注册

import BackNext from "../../components/BackNext.vue";

@Component(
  components: 
    BackNext,
  ,
)

export default class Personal extends Vue 
  private dataItems = [];

...