6

您能帮忙从另一个 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'.

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

谢谢，

鲍里斯

4

3 回答 3

4

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

这是因为您没有 .vue 文件的声明，因此 typescript 编译器无法加载它们。您需要在项目中声明 .vue 文件的一般声明或使用vuetype生成每个 .vue 文件声明

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

享受！鲍里斯

于 2017-03-28T09:43:28.950 回答
1

用这个

module: {
    rules: [
        {
            test: /\.ts?$/,
            loader: 'ts-loader',
            options: {
                appendTsSuffixTo: [/\.vue$/]
            }
        },
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
    ]
于 2017-12-19T11:24:11.337 回答
1

如果将以下代码放入与 vue 文件所在文件夹结构相同的“custom.d.ts”文件中，它应该可以工作。Boris 说得很漂亮，基本上 webpack 不识别 .vue 文件定义。

declare module '*.vue' {
    import Vue from 'vue';
   export default Vue;
 }

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

于 2018-01-09T14:22:28.613 回答