我开始使用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
因为它需要在每次更新时进行编译。