[英](Vue with Typescript) Failed to mount component: template or render function not defined
Failed to mount component: template or render function not defined.无法挂载组件:未定义模板或渲染函数。
Hi Guys I'm Trying to Use Typescript inside my project Laravel / Vue but I hade some Issues like this Error Message (Failed to mount component: template or render function not defined.)嗨,伙计们,我正在尝试在我的项目Laravel / Vue 中使用Typescript,但我遇到了一些类似此错误消息的问题(无法挂载组件:模板或渲染函数未定义。)
Please some help and thank you for all请一些帮助,谢谢大家
app.js应用程序.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 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'],
},
});
Example.vue例子.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>
You don't need Vue.extend
after export default, simply export the object导出默认后不需要Vue.extend
,直接导出对象
<script lang="ts">
export default {
name: 'Example',
data() {
return {}
},
mounted(): void {
console.log('Component mounted.')
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.