Импорт модуля 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 в вашем проекте или сгенерировать каждое объявление файла.vue с помощью vuetype

Я дважды проверил, что вышеупомянутое работает, следуя общему пути объявления. Обратите внимание, что большинство компонентов vue не имеют определений t.ds, поэтому вам придется написать их самостоятельно, чтобы TS могла скомпилировать файлы.

Наслаждайтесь! Борис

Answer 2

Использовать этот

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

Answer 3

Если вы поместите следующий код в файл custom.d.ts в той же структуре папок, где находятся ваши файлы vue, он должен работать. Борис сказал, что это красиво, и в основном 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