从打字稿中的另一个vue模块导入vue模块

Question

您能否帮助从另一个TypeScript2 Vuejs2组件导入TypeScript2 Vuejs2组件？

目标模块（MyTable.vue）

<script lang="ts">
export default {}
</script>

源模块（App.vue）

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
     <div class="container">
      <my-vuetable></my-vuetable>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import MyVuetable from './MyTable.vue'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  propMessage: string

  // inital data
  msg: number = 123

  // use prop values for initial data
  helloMsg: string = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

我正在使用最新的TS / Webpack / vue-loader / vue-class-component版本。

请注意，类似的基于JS（而非TS）的代码在@https ：//github.com/ratiw/vuetable-2-tutorial-bootstrap上运行

所有代码都是@ https://github.com/borislitvak/vue-from-vue-question

Webpack结果

App.vue.d.ts  211 bytes          [emitted]
Entrypoint main = build.js build.js.map
   [0] ./~/vue/dist/vue.runtime.esm.js 175 kB {0} [depth 1] [built]
       [exports: default]
       cjs require vue [3] ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./App.vue 19:12-26
       cjs require vue [4] ./~/vue-class-component/dist/vue-class-component.common.js 12:26-40
       cjs require vue [8] ./example.ts 3:12-26
   [1] ./~/process/browser.js 5.3 kB {0} [depth 2] [built]
       cjs require process [0] ./~/vue/dist/vue.runtime.esm.js 1:0-37
       cjs require process [4] ./~/vue-class-component/dist/vue-class-component.common.js 1:0-37
   [2] ./App.vue 1.38 kB {0} [depth 1] [built]
       cjs require ./App.vue [8] ./example.ts 4:16-36
   [3] ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./App.vue 2.09 kB {0} [depth 2] [built]
       cjs require !!ts-loader!./node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue [2] ./App.vue 3:2-93
   [4] ./~/vue-class-component/dist/vue-class-component.common.js 4.02 kB {0} [depth 3] [built]
       cjs require vue-class-component [3] ./~/ts-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./App.vue 20:28-58
   [5] ./~/vue-loader/lib/component-normalizer.js 1.12 kB {0} [depth 2] [built]
       cjs require !./node_modules/vue-loader/lib/component-normalizer [2] ./App.vue 1:16-78
   [6] ./~/vue-loader/lib/template-compiler.js?id=data-v-52143112!./~/vue-loader/lib/selector.js?type=template&index=0!./App.vue 1.12 kB {0} [depth 2] [built]
       cjs require !!./node_modules/vue-loader/lib/template-compiler?id=data-v-52143112!./node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue [2] ./App.vue 5:2-152
   [7] (webpack)/buildin/global.js 509 bytes {0} [depth 2] [built]
       cjs require global [0] ./~/vue/dist/vue.runtime.esm.js 1:0-44
   [8] ./example.ts 300 bytes {0} [depth 0] [built]

ERROR in ....\App.vue.ts
(20,24): error TS2307: Cannot find module './MyTable.vue'.

我是客户端开发的新手，请帮忙！

谢谢，

鲍里斯

Answer 1

答案由https://github.com/ktsn给出，原文可以在 @ https://github.com/vuejs/vue/issues/5298找到：

这是因为您没有 .vue 文件的声明，那么打字稿编译器无法加载它们。您需要在项目中声明.vue 文件的通用声明或使用vuetype生成每个 .vue 文件声明

我已经仔细检查了上述内容是否有效，遵循一般声明路径。请注意，大多数 vue 组件不附带 t.ds 定义，因此您必须自己编写它们，以便 TS 能够编译文件。

享受！鲍里斯