Laravel - Импорт нового компонента Vue - PullRequest
Новая
       14

Laravel - Импорт нового компонента Vue

0 голосов
/ 31 мая 2018

Я начал работать с 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>

Я испытал много вещей, но у меня ничего не получалось.Нужно ли регистрировать мои новые компоненты где-нибудь еще?В консоли нет ошибок, и я не вижу, в чем проблема.

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 31 мая 2018

Ваш шаблон должен иметь корневой элемент: 

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

И лучше запустить npm run watch, потому что он должен компилироваться при каждом обновлении.

...