Question

点击＆＃34; Counter＆＃34;时出现以下错误或者＆＃34;获取数据＆＃34;。

[Vue warn]: Failed to mount component: template or render function not defined.                      vendor.js?v=MxNIG8b0Wz6QtAfWhyA0-4CCwZshMscBGmtIBXxKshw:13856 

found in

---> <Anonymous>
       <T> at ClientApp\components\app\app.vue.html
         <Root>

我的boot.ts如下：

import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const Counter = () => import('./components/counter/counter').then(m => m.default);
const FetchData = () => import('./components/fetchdata/fetchdata');

const routes = [
    { path: '/', component:  require('./components/home/home.vue.html').default },
    { path: '/counter', component: Counter },
    { path: '/fetchdata', component: FetchData }
];

new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    render: h => h(require('./components/app/app.vue.html').default)
});

我的Counter.vue.html如下

<template>
    <div>
        <h1>Counter</h1>

        <p>This is a simple example of a Vue.js component.</p>

        <p>Current count: <strong>{{ currentcount }}</strong></p>

        <button @click="incrementCounter">Increment</button>
    </div>
</template>

<script src="./counter.ts"></script>

我的反对意见如下：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class CounterComponent extends Vue {
    currentcount: number = 0;

    incrementCounter() {
        this.currentcount++;
    }
}

我的fetchdata.vue.html如下：

<template>
    <div>
        <h1>Weather forecast</h1>

        <p>This component demonstrates fetching data from the server.</p>

        <table v-if="forecasts.length" class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Temp. (C)</th>
                    <th>Temp. (F)</th>
                    <th>Summary</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in forecasts">
                    <td>{{ item.dateFormatted }}</td>
                    <td>{{ item.temperatureC }}</td>
                    <td>{{ item.temperatureF }}</td>
                    <td>{{ item.summary }}</td>
                </tr>
            </tbody>
        </table>

        <p v-else><em>Loading...</em></p>
    </div>
</template>

<script src="./fetchdata.ts"></script>

我的fetchdata.ts如下：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

interface WeatherForecast {
    dateFormatted: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
}

@Component
export default class FetchDataComponent extends Vue {
    forecasts: WeatherForecast[] = [];

    mounted() {
        fetch('api/SampleData/WeatherForecasts')
            .then(response => response.json() as Promise<WeatherForecast[]>)
            .then(data => {
                this.forecasts = data;
            });
    }
}

我的NPM包装如下：

- vue-loader@14.2.2

- vue@2.5.16

- vue-router@3.0.1

- webpack@4.3.0（npm list webpack显示 - （空）。不知道为什么。但我认为这不是问题。）

- typescript@2.8.1

Answer 1

对于fetchdata，你还需要做你为'counter'做的事情。

const FetchData = () => import('./components/fetchdata/fetchdata').then(m => m.default);

然后，对于这两个组件。你已经打电话给“。ts”文件，这些文件在的“.vue.html”文件（模板）所在的地方一无所知。

最短分辨率是指引用“.ts”文件的“.vue.html”。像这样。

const FetchData = () => import('./components/fetchdata/fetchdata.vue.html').then(m => m.default);

const Counter= () => import('./components/counter/counter.vue.html').then(m => m.default);

无法安装组件：模板或渲染功能未在Vue中使用Typescript＆amp;的WebPack，

1 个答案: