형식 설명서의 다른 vue 모듈에서 vue 모듈 가져오기

형식 설명서의 다른 vue 모듈에서 vue 모듈 가져오기

다른 TypeScript2 Vuejs2 컴포넌트에서 TypeScript2 Vuejs2 컴포넌트의 Import를 도와주시겠습니까?

타깃 모듈(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 입니다.

웹 팩 결과

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'.

저는 클라이언트 측 개발은 처음입니다.도와주세요!

감사합니다.

보리스

답변은 https://github.com/ktsn에서 제공되었으며 원본은 https://github.com/vuejs/vue/issues/5298에서 확인할 수 있습니다.

이는 .vue 파일에 대한 선언이 없기 때문에 typescript 컴파일러가 파일을 로드할 수 없기 때문입니다.프로젝트에서 .vue 파일의 일반적인 선언을 선언하거나 vutype을 사용하여 각 .vue 파일 선언을 생성해야 합니다.

위의 내용이 동작하는 것을 재차 확인해, 일반적인 선언의 경로를 따르고 있습니다.대부분의 vue 컴포넌트에는 t.ds 정의가 포함되어 있지 않기 때문에 TS가 파일을 컴파일하려면 사용자가 직접 작성해야 합니다.

즐겨라! 보리스!

이것을 사용하다

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

다음 코드를 vue 파일이 있는 폴더 구조와 동일한 폴더 구조의 'custom.d.ts' 파일에 넣으면 작동합니다.Boris는 그것을 아름답게 표현했고 기본적으로 웹팩은 .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

언급URL : https://stackoverflow.com/questions/42945415/import-vue-module-from-another-vue-module-in-typescript