admin管理员组文章数量:1417691
I am Learner in Vuejs with laravel, i created a fresh project in laravel, with vue.js frontend. but after run mand php artisan serve, when i run project on webbrowser. output is blank. i checked network console, there is also the output showing in example ponent is blank. please help me to find my mistake.
web.php
Route::get('/', function () {
return view('wele');
});
wele.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Vue</title>
<!-- Fonts -->
<link href=":200,600" rel="stylesheet">
</head>
<body>
<div id="app">
<example-ponent> </example-ponent>
<script src="{{ asset('js/app.js') }}"></script>
</div>
</body>
</html>
ExampleComponent.vue
<script>
Vueponent('example-ponent', {
template: `This is the homepage`
})
new Vue({
el: '#app'
})
</script>
app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
require('./bootstrap');
window.Vue = require('vue');
alert('Alert');
Vueponent('example-ponent', require('./ponents/ExampleComponent.vue').default);
I am Learner in Vuejs with laravel, i created a fresh project in laravel, with vue.js frontend. but after run mand php artisan serve, when i run project on webbrowser. output is blank. i checked network console, there is also the output showing in example ponent is blank. please help me to find my mistake.
web.php
Route::get('/', function () {
return view('wele');
});
wele.blade.php
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Vue</title>
<!-- Fonts -->
<link href="https://fonts.googleapis./css?family=Nunito:200,600" rel="stylesheet">
</head>
<body>
<div id="app">
<example-ponent> </example-ponent>
<script src="{{ asset('js/app.js') }}"></script>
</div>
</body>
</html>
ExampleComponent.vue
<script>
Vue.ponent('example-ponent', {
template: `This is the homepage`
})
new Vue({
el: '#app'
})
</script>
app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
require('./bootstrap');
window.Vue = require('vue');
alert('Alert');
Vue.ponent('example-ponent', require('./ponents/ExampleComponent.vue').default);
1 Answer
Reset to default 5Vue.ponent('example-ponent', {
template: `<div id="app">This is the homepage</div>`
})
You have to wrap the template content in a parent element, such as <div> </div>. If not Vue will show an error, explaining that every ponent must have a single root element.
本文标签：
版权声明：本文标题：javascript - Error compiling template: Component template requires a root element, rather than just text in vue.js with laravel 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745271538a2650922.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论