设置Meteor、Vue和类型记录

Question

我在努力让Meteor，Vue和打字稿一起工作。我找不到任何关于Meteor、Vue和Typescript的教程，github项目的例子也不能正常工作，并且使用变通方法来避免我遇到的问题。例如，将类型记录代码分离到自己的文件中，而不是在脚本标记中。

根据这教程，我应该能够用两种不同的方式定义组件。

1

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

@Component
export default class HelloWorld extends Vue {
}
</script>

2

<script lang="ts">
@component({
    name: 'HelloWorld'
})
</script>

如果我创建一个meteor项目并执行这些步骤，那么上面的代码就会出现错误。

Meteor创建

meteor create --vue "vue-typescript-test"

tsconfig.json 添加

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015"],
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  }
}

ts-loader 添加

npm i -D typescript ts-loader

vue-property-decorator 添加

npm install vue-property-decorator

如果我将Hello.vue中的脚本更改为使用类型记录(如教程中提到的那样)，我将得到一个错误。

<script lang="ts">
import {Component} from "vue-property-decorator";

@Component({
  name: 'Hello'
})
</script>

误差

[vue-component] Error while compiling in tag <script> using lang ts: Can't find handler for lang 'ts', did you install it?
    [vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
ReferenceError: TemplatingTools is not defined
at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:81:13)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
at packages/vue-component/plugin/vue-compiler.js:57:34
at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
at C:\tools\isobuild\compiler-plugin.js:212:27
at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
at C:\tools\isobuild\compiler-plugin.js:199:22
at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
at C:\tools\isobuild\compiler-plugin.js:198:15
at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
at ClientTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
at C:\tools\isobuild\bundler.js:858:34
at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
at ClientTarget.make (C:\tools\isobuild\bundler.js:852:18)
at C:\tools\isobuild\bundler.js:3233:14
at C:\tools\isobuild\bundler.js:3386:25
at Array.forEach (<anonymous>)
  at C:\tools\isobuild\bundler.js:3340:14
  at Object.capture (C:\tools\utils\buildmessage.js:283:5)
  at bundle (C:\tools\isobuild\bundler.js:3214:31)
  at C:\tools\isobuild\bundler.js:3157:32
  at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
  at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
  at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
  at C:\tools\runners\run-app.js:581:24
  at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
  at bundleApp (C:\tools\runners\run-app.js:580:34)
  at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
  at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
  at C:\tools\runners\run-app.js:410:12
  [vue-component] Error while compiling in tag <script> using lang ts: Can't find handler for lang 'ts', did you install it?
    [vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
      ReferenceError: TemplatingTools is not defined
      at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
      at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:81:13)
      at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
      at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
      at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
      at packages/vue-component/plugin/vue-compiler.js:57:34
      at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
      at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
      at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
      at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
      at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
      at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
      at C:\tools\isobuild\compiler-plugin.js:212:27
      at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
      at C:\tools\isobuild\compiler-plugin.js:199:22
      at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
      at C:\tools\isobuild\compiler-plugin.js:198:15
      at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
      at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
      at ClientTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
      at C:\tools\isobuild\bundler.js:858:34
      at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
      at ClientTarget.make (C:\tools\isobuild\bundler.js:852:18)
      at C:\tools\isobuild\bundler.js:3233:14
      at C:\tools\isobuild\bundler.js:3386:25
      at Array.forEach (<anonymous>)
        at C:\tools\isobuild\bundler.js:3340:14
        at Object.capture (C:\tools\utils\buildmessage.js:283:5)
        at bundle (C:\tools\isobuild\bundler.js:3214:31)
        at C:\tools\isobuild\bundler.js:3157:32
        at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
        at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
        at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
        at C:\tools\runners\run-app.js:581:24
        at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
        at bundleApp (C:\tools\runners\run-app.js:580:34)
        at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
        at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
        at C:\tools\runners\run-app.js:410:12
        [vue-component] Error while compiling in tag <script> using lang ts: Can't find handler for lang 'ts', did you install it?
          [vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
            ReferenceError: TemplatingTools is not defined
            at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
            at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:81:13)
            at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
            at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
            at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
            at packages/vue-component/plugin/vue-compiler.js:57:34
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
            at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
            at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
            at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
            at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
            at C:\tools\isobuild\compiler-plugin.js:212:27
            at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
            at C:\tools\isobuild\compiler-plugin.js:199:22
            at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
            at C:\tools\isobuild\compiler-plugin.js:198:15
            at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
            at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
            at ServerTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
            at C:\tools\isobuild\bundler.js:858:34
            at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
            at ServerTarget.make (C:\tools\isobuild\bundler.js:852:18)
            at C:\tools\isobuild\bundler.js:3258:14
            at C:\tools\isobuild\bundler.js:3392:24
            at Object.capture (C:\tools\utils\buildmessage.js:283:5)
            at bundle (C:\tools\isobuild\bundler.js:3214:31)
            at C:\tools\isobuild\bundler.js:3157:32
            at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
            at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
            at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
            at C:\tools\runners\run-app.js:581:24
            at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
            at bundleApp (C:\tools\runners\run-app.js:580:34)
            at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
            at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
            at C:\tools\runners\run-app.js:410:12
            => Errors prevented startup:

            While processing files with akryum:vue-component (for target web.browser):
            packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
            at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
            at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
            at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
            at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
            at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
            at packages/vue-component/plugin/vue-compiler.js:57:34
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
            at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
            at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
            at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)


            While processing files with akryum:vue-component (for target web.browser.legacy):
            packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
            at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
            at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
            at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
            at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
            at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
            at packages/vue-component/plugin/vue-compiler.js:57:34
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
            at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
            at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
            at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)


            While processing files with akryum:vue-component (for target os.windows.x86_64):
            packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
            at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
            at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
            at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
            at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
            at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
            at packages/vue-component/plugin/vue-compiler.js:57:34
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
            at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
            at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
            at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)

如何正确设置“流星”、“价值”和“打字稿”项目？

更新

如果有人可以展示如何创建Meteor、Vue、Typescript和Vue Class组件语法项目的步骤，这将解决我的问题。

Answer 1

你需要为我们提供一个存储库来帮助你。顺便说一下，您的教程并不是一步一步地遵循的教程。它只是解释了事情是如何运作的。我建议你再找一个。

我不知道您的意思是什么，但是如果只是使用Meteor (使用类型记录)的VueJS，我建议您参考正式框架的文档。，我可以向您保证，它比教程更好。

这是给vueJS https://guide.meteor.com/vue.html的

这是打字稿部分https://guide.meteor.com/build-tool.html#typescript

如果您不想以任何理由跟踪文档并继续使用您的projet，那么我们将不得不阅读其中的内容。

找不到朗兹的处理程序

ts-loader是允许您在脚本中使用lang="ts“的包。

我想您有上面的消息，因为它没有配置。因此，您必须找到如何配置它。

在https://cnpmjs.org/package/ts-loader中，它说：

配置创建或更新webpack.config.js，如下所示： module.exports ={ mode："development"，devtool：“inline map”，条目："./app.ts"，输出：{ filename："bundle.js“}，解析：{ // Add .ts和.tsx作为可解析扩展。扩展：".ts“、".tsx”、".js“}、模块：{ rules: //所有具有.ts或.tsx扩展名的文件都将由ts-loader { test: /.ts？$/，加载程序：”ts-加载程序“}}处理； 添加一个tsconfig.json文件。(下面的这个非常简单，但是你可以根据你的内心愿望来调整它) { "compilerOptions"：{ "sourceMap"：true }