Я пытаюсь настроить Vue в Laravel 6.
Я запустил:
композитору требуется laravel / ui
php artisan ui vue
npm install && npm run dev
Затем внутри файла welcome.blade.php я удалил тело страницы приветствия и добавил div с идентификатором root.
IМожно получить пример компонента для отображения в браузере, но я не могу создать какие-либо новые компоненты и заставить их отображать без ошибки. Я даже попытался просто переименовать пример компонента, и даже это не сработает. Я переименовал файл в App.vue, а затем переименовал все остальное - см. Ниже:
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('app', require('./components/App.vue').default);
const app = new Vue({
el: '#app',
});
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{csrf_token()}}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app.css">
<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Journey To Dev</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
App.vue не отличается от ExampleComponent.vue, я просто переименовал файл:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
}
</script>
Спасибо!