如何在 Vue 中创建 .ts 组件?

分享于2022年07月17日 javascript typescript vue-component vue.js vuejs2 问答
【问题标题】:如何在 Vue 中创建 .ts 组件?(How to create .ts components in Vue?)
【发布时间】:2022-06-15 13:24:54
【问题描述】:

我有一个需要更新的旧项目,它使用“av-ts”插件创建类样式组件,使用 vue-ts-loader 将 .ts 文件编译为 vue 组件。该项目目前在 vue 2.4.2 上运行,但我想更新到 2.6.14。由于 'vue-ts-loader' 已被贬低,并且项目在更新到 ^2.5 后中断,我需要另一种方法来编译文件。

我想知道是否有办法配置常规 ts-loader 来为我做这件事。有人有想法吗?

组件目前如下所示:

import { Component, p, Prop } from 'av-ts';
import * as Vue from 'vue';

@Component({
  template: require('./example-component.component.html')
})
export default class ExampleComponent extends Vue {
  @Prop public icon: any = p({
    type: String,
    required: false,
    default: ''
  });

  @Prop public width: any = p({
    type: Number,
    required: false,
    default: 24
  });

  @Prop public height: any = p({
    type: Number,
    required: false,
    default: 24
  });

  @Prop public classes: any = p({
    type: String,
    required: false,
    default: ''
  });
}


  • 我通过 CDN 将 VuePropertyDecorator 与 VueClassComponent 库一起使用。因此,通过您的 head 标签中包含的脚本。它允许我使用常规的 tsc 编译器编译我的打字稿文件。虽然不会创建捆绑包。仅单独的 .js 文件。
  • 你能告诉我脚本是什么样子的吗?我还会从 VueClassComponent 或 VuePropertyDecorator 导入属性吗?谢谢!
  • 这是一个简单的应用程序,所有库都通过 CDN 脚本加载: stackblitz.com/edit/typescript-2bruat?file=index.ts 。运行 tsc 会将所有 .ts 文件编译为 .js 。如果你确实想通过 webpack 打包,你可以。这样就不用通过cdn加载库了。

【解决方案1】:

在最坏的情况下。我们不能将 SFC 与 ts 一起使用。由于 vue-class-component deprecated in vue3 。vue3 中有一个替代。 vue-facing-decorator 。它显示了如何 write component with regular ts file

  • 其实很有帮助,谢谢分享。所以你说我可以使用这个包直接从 2.4 升级到 3.x?我认为我最大的问题是我正在处理的项目使用 webpack,我不知道如何配置加载器以及如何让所有东西一起工作。我对任何与 webpack 相关的东西都很糟糕。