(Vue с Typescript) Не удалось смонтировать компонент: шаблон или функция визуализации не определены - PullRequest
Новая
       18

(Vue с Typescript) Не удалось смонтировать компонент: шаблон или функция визуализации не определены

0 голосов
/ 01 марта 2020

Не удалось смонтировать компонент: шаблон или функция визуализации не определены.

Привет, ребята, я пытаюсь использовать Машинопись внутри моего проекта Laravel / Vue но у меня есть некоторые проблемы, такие как это сообщение об ошибке (Не удалось смонтировать компонент: не определен шаблон или функция рендеринга.)

Пожалуйста, помогите и спасибо за все

приложение. js 

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

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

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

tsconfig. json

{
  "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>

1 Ответ

0 голосов
/ 01 марта 2020

Вам не нужно Vue.extend после экспорта по умолчанию, просто экспортируйте объект 

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