[英]Failed to mount component: template or render function not defined in Vue with Typescript & Webpack,
I get following error when click on "Counter" or "Fetch Data". 单击“计数器”或“获取数据”时出现以下错误。
[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>
My boot.ts is as following: 我的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)
});
My Counter.vue.html is as following 我的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>
My counter.ts is as following: 我的counter.ts如下:
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
@Component
export default class CounterComponent extends Vue {
currentcount: number = 0;
incrementCounter() {
this.currentcount++;
}
}
My fetchdata.vue.html is as following: 我的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>
My fetchdata.ts is as following: 我的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;
});
}
}
My NPM packags are as following: 我的NPM包装如下:
-- vue-loader@14.2.2 -vue-loader@14.2.2
-- vue@2.5.16 -vue@2.5.16
-- vue-router@3.0.1 -vue-router@3.0.1
-- webpack@4.3.0 (npm list webpack shows -- (empty) . dont know why. But this is not an issue I guess.) -webpack@4.3.0(npm列表webpack显示-(空) 。不知道为什么。但是我猜这不是问题。)
-- typescript@2.8.1 -typescript@2.8.1
For fetchdata, u'll also need to do what you have done for 'counter'. 对于fetchdata,您还需要执行针对“计数器”的操作。
const FetchData = () => import('./components/fetchdata/fetchdata').then(m => m.default);
Then, for both of the component. 然后,对于两个组件。 U have called ".ts" files which knows nothing aboout where their ".vue.html" files (templates) are. U已将“ .ts”文件称为“ .vue.html”文件(模板)所在的位置。
shortest resolution is to refer ".vue.html" where you have referenced their ".ts" files. 最短的解决方案是在引用其“ .ts”文件的地方引用“ .vue.html”。 like this. 像这样。
const FetchData = () => import('./components/fetchdata/fetchdata.vue.html').then(m => m.default);
const Counter= () => import('./components/counter/counter.vue.html').then(m => m.default);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.