(Vue with Typescript) 無法掛載組件：未定義模板或渲染函數

Question

無法掛載組件：未定義模板或渲染函數。

嗨，伙計們，我正在嘗試在我的項目Laravel / Vue 中使用Typescript，但我遇到了一些類似此錯誤消息的問題（無法掛載組件：模板或渲染函數未定義。）

請一些幫助，謝謝大家

應用程序.js

    require('./bootstrap');
    window.Vue = require('vue');

    import Example from './components/Example.vue';

    const app = new Vue({
        el: '#app',
        components: {
          Example
        }
    });

配置文件

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015", "es2017"],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true
  },
  "paths": {
    "@/*": [
      "resources/js/*"
    ]
  },
  "include": [
    "resources/js/**/*.ts",
    "resources/js/**/*.vue"
  ],
  "files": [
    "resources/js/references.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .webpackConfig({
      module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                      appendTsSuffixTo: [ /\.vue$/ ]
                    }
                }],
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    esModule: true
                }
            }
        ],
      },
      resolve: {
          extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
      },
  });

例子.vue

<template>
    <div></div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    name: 'Example' as string,
    data() {
      return {}
    },
    mounted(): void {
        console.log('Component mounted.')
    }
})
</script>

Answer 1

導出默認后不需要Vue.extend ，直接導出對象

<script lang="ts">
export default {
    name: 'Example',
    data() {
      return {}
    },
    mounted(): void {
        console.log('Component mounted.')
    }
}
</script>