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文件的声明，因此typescript编译器无法加载它们。您需要在项目中声明general declaration of .vue file或使用vuetype生成每个.vue文件声明

我已经仔细检查过上面的工作，遵循一般的声明路径。请注意，大多数vue组件没有附带t.ds定义，因此您必须自己编写它们以便TS能够编译文件。

享受！鲍里斯

Answer 2

使用此

module: {
    rules: [
        {
            test: /\.ts?$/,
            loader: 'ts-loader',
            options: {
                appendTsSuffixTo: [/\.vue$/]
            }
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
    ]

Answer 3

如果您将以下代码放入＆＃39; custom.d.ts＆＃39;文件位于vue文件所在的文件夹结构中，应该可以正常工作。鲍里斯说得漂亮，基本上webpack不能识别.vue文件定义。

KafkaEmbedded

此问题已在我的博文中解释：https://danpottsdoes.wordpress.com/2017/09/28/unit-testing-vue-class-components-using-typescript-chai-sinon-my-findings

从typescript中的另一个vue模块导入vue模块

目标模块（MyTable.vue）

源模块（App.vue）

Webpack结果

3 个答案: