Laravel - 导入新的 Vue 组件答案

【问题标题】：Laravel - Import new Vue ComponentLaravel - 导入新的 Vue 组件
【发布时间】：2018-11-10 11:47:19
【问题描述】：

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

我尝试了很多东西，但对我一点用都没有。我必须在其他任何地方注册我的新组件吗？控制台没有错误，看不出问题出在哪里。

感谢您的帮助！

【问题讨论】：

example-component 工作怎么样？
就像我说的，是的，它工作得很好
添加此 javascript 后，您是 npm run dev 还是 yarn run dev？
呵呵，解决了这个问题。诡异的。写一个答案，我会把它标记为正确答案:)
另一个问题，每当我更改组件时，我都必须运行 npm dev。否则不接受更改。这不正常，是吗？

标签： laravel vue.js vue-component

【解决方案1】：

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

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

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

【讨论】：