Q&A
コードは画像ではなくテキストでマークダウン利用して提示いただけますか？
コピペもできないので再現確認やコードのミスが見つけづらいです
Laravelを勉強しているものです。
以下の動画を参考にphpにVue.jsのテンプレートを反映させようとしているのですがうまくいきません。
https://www.youtube.com/watch?v=DJ6PD_jBtU0
app.jsの中身
Articles.vueの中身
web.phpの中身
welcome.blade.phpの中身
アクセスしたときに表示されたページ
ソースコードです。
app.js
javascript
1 2/** 3 * First we will load all of this project's JavaScript dependencies which 4 * includes Vue and other libraries. It is a great starting point when 5 * building robust, powerful web applications using Vue and Laravel. 6 */ 7 8require('./bootstrap'); 9 10window.Vue = require('vue'); 11 12/** 13 * The following block of code may be used to automatically register your 14 * Vue components. It will recursively scan this directory for the Vue 15 * components and automatically register them with their "basename". 16 * 17 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> 18 */ 19 20// const files = require.context('./', true, /.vue$/i) 21// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) 22 23// Vue.component( 24// 'example-component', 25// require('./components/ExampleComponent.vue') 26// ); 27Vue.component( 28 'articles', 29 require('./components/Articles.vue') 30); 31 32/** 33 * Next, we will create a fresh Vue application instance and attach it to 34 * the page. Then, you may begin adding components to this application 35 * or customize the JavaScript scaffolding to fit your unique needs. 36 */ 37 38const app = new Vue({ 39 el: '#app' 40}); 41
Articles.vue
vue
1<template> 2 <div> 3 <h2>Articles</h2> 4 </div> 5</template>
web.php
php
1<?php 2 3/* 4|-------------------------------------------------------------------------- 5| Web Routes 6|-------------------------------------------------------------------------- 7| 8| Here is where you can register web routes for your application. These 9| routes are loaded by the RouteServiceProvider within a group which 10| contains the "web" middleware group. Now create something great! 11| 12*/ 13 14Route::get('/', function () { 15 return view('welcome'); 16});
welcome.blade.php
php
1<!doctype html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <title>Larticles App</title> 8 9 <!-- Fonts --> 10 <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css"> 11 </head> 12 <body> 13 <div id="app"> 14 <div class="container"> 15 <articles></articles> 16 </div> 17 </div> 18 <script src="{{ asset('js/app.js')}}"></script> 19 </body> 20</html>
Laravelを使ったことのある方、またはVue.js phpに詳しい方がいましたら
ご確認いただけないでしょうか？
スペルミスかどうかも確認しましたが解決できませんでした。
ちなみにLaravelの環境構築は以下のサイトを参考にしました。
https://techacademy.jp/magazine/11521
回答1件
0
welcome.blade.phpにはcsrfがないので自分で追加するか、
<meta name="csrf-token" content="{{ csrf_token() }}">
php artisan make:authでデフォルトのレイアウトを作る。
Laravelはこれがデフォルトのビュー。
https://github.com/laravel/framework/blob/5.7/src/Illuminate/Auth/Console/stubs/make/views/layouts/app.stub
welcomeに書かれてないのはひっかかりやすい罠。
投稿2018/12/30 05:04
総合スコア10377
回答ありがとうございます。
csrfを追加したところブラウザのコンソールのエラーはなくなりましたが
テンプレートは表示されませんでした。何かインストールが必要なものはありますでしょうか？
修正内容は以下です。
welcome.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Larticles App</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<div class="container">
<articles></articles>
</div>
</div>
<script src="{{ asset('js/app.js')}}"></script>
</body>
</html>
あなたの回答
tips
プレビュー
