Question

我已经使用Webpack，Babel，Vue和TypeScript来测试一个新项目。在测试Webpack + Babel和Webpack + Babel + Vue以使用Vue文件编写某些Web应用程序时，一切都很好。

但是，将相同的代码转换为TypeScript （Webpack + Vue + TypeScript）时，出现了问题。在.html和.ts文件上使用Vue和TypeScript进行编码很好，但是在加载.vue文件时才出错。

图片显示了浏览器中的错误。它确实使用“ Hello Vue TypeScript”在控制台上显示了Vue数据

我是否错过了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

有两种方法可以解决此错误：

在 .ts 中导入Vue组件的方法如下，

components:{ 'hello' : HelloTs }

OR

您可以在导出组件时为其命名，如下所示，

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

无法使用TypeScript在Vue-cli 2上安装组件

1 个答案: