Question

我开始使用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>

这带有laravel并且工作正常。然而，测试组件是由我编写的，根本不起作用。控制台中没有错误。

在html文件的底部，我包括了app.js（这是vue.js在laravel中开始的地方）

app.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>

我尝试了很多东西，但根本没有任何作用。我是否必须在其他地方注册我的新组件？控制台中没有错误，我看不出问题所在。

感谢您的帮助！

Answer 1

您的模板需要有一个根元素：

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

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

Laravel - 导入新的Vue组件

1 个答案: