从 typescript 中的另一个 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 文件的声明，那么 typescript 编译器无法加载它们。您需要在项目中声明 .vue 文件的通用声明，或者使用 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

如果您将以下代码放入与 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

Answer 4

基于https://github.com/microsoft/TypeScript-Vue-Starter/tree/master

将这些添加到您的 tsconfig.json 中

"compilerOptions": {
    "allowJs": false,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "types": ["vite/client"],
    "resolveJsonModule": true
  },
  "files": [
    "./src/shims-vue.d.ts"
  ],
  "include": ["./src/**/*.ts", "./src/**/*.d.ts", "./src/**/*.tsx", "./src/**/*.vue"],

当然不要忘记创建文件

./src/shims-vue.d.ts

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