Не удалось смонтировать компонент в Vue-cli 2 с использованием TypeScript

Question

Я использовал Webpack, Babel, Vue и TypeScript для тестирования нового проекта.Все было хорошо при тестировании Webpack + Babel и Webpack + Babel + Vue для написания некоторых веб-приложений с файлами Vue.

Однако при переводе того же кода в TypeScript (Webpack + Vue + TypeScript) , что-то пошло не так.Кодирование с использованием Vue и TypeScript для файлов .html и .ts прошло нормально, но только при загрузке файлов .vue произошла ошибка.

На рисунке показана ошибка в браузере.И он отображал данные консоли на консоли с помощью «Hello Vue TypeScript»

Я пропустил некоторые настройки webpack, tsconfig иличто-то не так?Пожалуйста, дайте мне несколько советов, чтобы решить эту проблему.

.html

  <div id="app">
      <h1> Hello World TS</h1>
      <h3>{{message}}</h3>
      <hello></hello>
  </div>

.ts

import Vue from 'vue'
import Hello from './components/HelloTs.vue'

let app = new Vue({
  el: '#app',
  data: {
      message: "Hello Vue TypeScript"
  },
  components:{ 'hello': Hello }
})
console.log("vue $data: "+app.message)

.vue

<template>
  <div class="message">
    Hi Vue
  </div>
</template>

<script lang="ts">

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class HelloComponent extends Vue {

}

</script>

<style scoped>
  .message {
    color: blue;
  }
</style>

tsconfig.json

{
    "compilerOptions": {

        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es2015",
        "target": "es5",
        "allowJs": true,
        "removeComments": true,
        "sourceMap": true,
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "typeRoots": [
            "./types",
            "./node_modules/vue/types"
        ],
        "pretty": true
    }

}

webpack.config.js

module: {
   rules: [
    // TypeScript
      {
        test: /\.tsx?$/,
         use: 'ts-loader',
         exclude: /node_modules/
       },
            // this will apply to both plain `.css` files
       // AND `<style>` blocks in `.vue` files
       {
         test: /\.css$/,
         use: [           
              'css-loader',
              'style-loader'
         ]
       },
       // this will apply to both plain `.vue` files
       {
         test: /\.vue$/,
         use: [
                'vue-loader',
                'vue-style-loader',
                'vue-template-compiler'
         ]
       }
    ]
},

plugins: [
        // make sure to include the plugin for vue-loader 15.*
        new VueLoaderPlugin(),
        new CheckerPlugin()
],

// how modules are resolved.
resolve: {
        extensions: [ '.ts', '.tsx','.vue' ],
        alias:{
            vue$: "vue/dist/vue.esm.js"
        }
}

Answer 1

Существует два способа решения этой ошибки:

Метод импорта компонента Vue в .ts , как показано ниже,

components:{ 'hello' : HelloTs }

ИЛИ

При экспорте вы можете присвоить имя компоненту, как показано ниже:

export default class HelloComponent extends Vue {
   name : 'hello'
}