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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745271554a4619777.html
评论列表（0条）