Vue.js не работает, когда вызывать mix.react и mix.js с помощью Laravel Mix.
Однако комментирование mix.react заставляет Vue.js работать правильно.
Знаете ли вы, почему?
РАБОТА (webpack.mix.js)
let mix = require('laravel-mix');
mix.js('src/resources/assets/vuejs/app.js', 'src/assets/js/vue_app.js');
// mix.react('src/resources/assets/js/app.js', 'src/assets/js/react_app.js');
- laravel-mix 2.1.11
- vue2.5.16
- реакция 15.6.2
Журнал консоли
[Vue warn]: не удалось смонтироватькомпонент: шаблон или функция визуализации не определены.
находится в
---> в src / resources / assets / vuejs / components / Notification.vue
НЕ РАБОТАЕТ (webpack.mix.js)
let mix = require('laravel-mix');
mix.js('src/resources/assets/vuejs/app.js', 'src/assets/js/vue_app.js');
mix.react('src/resources/assets/js/app.js', 'src/assets/js/react_app.js');
HTML
<html>
<body>
<div id="app">
<h1>Test</h1>
<notification>
slot message
</notification>
</div>
{{ asset_js('vue_app.js') }}
</body>
</html>
src / resources / assets / vuejs/app.js
import Vue from "vue";
import Notification from "./components/Notification.vue";
new Vue({
el: '#app',
components: {Notification},
});
src / resources / assets / vuejs / components / Notification.vue
<template>
<div class="notification">
{{ body }}
<p>
<slot></slot>
</p>
</div>
</template>
<script>
export default {
name: 'notification',
data() {
return {
body: 'I am a notification.'
}
}
}
</script>
<style>
.notification {
background: red;
}
</style>