Laravel - 导入新的 Vue 组件



我开始使用Vue JS,我想在我的laravel项目中使用它。我正在使用的Laravel版本是5.5

我有一个vueTest.blade.php。看起来像这样:

<html>
<head>
<title>
Vue Test
</title>
<style href="css/app.css" rel="stylesheet"></style>
</head>
<body>
<div id="app">
<example-component></example-component>
<test></test> <<<----- This component is the problem! 
</div>
<script src="js/app.js"></script>
</body>
</html>

这带有拉拉维尔并且工作正常。 但是,测试组件是由我编写的,根本不起作用。控制台中没有错误。

在 html 文件的底部,我包括了应用程序.js(这就是 vue.js 从 laravel 开始的地方(

该应用程序.js如下所示:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('test', require('./components/Test.vue')); <<--- Thats the only line I addet
const app = new Vue({
el: '#app'
});

Test.vue 是这样的:

<template>
<h1>hello</h1>
<p>Bla bla bla</p>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>

我尝试了很多东西,但对我没有任何效果。我是否必须在其他任何地方注册我的新组件?控制台中没有错误,我看不到问题出在哪里。

感谢您的任何帮助!

您的模板需要具有根元素:

<template>
<div>
<h1>hello</h1>
<p>Bla bla bla</p>
</div>
</template>

更好地运行npm run watch因为它需要在每次更新时进行编译。

最新更新