Laravelを勉強しているものです。
以下の動画を参考にphpにVue.jsのテンプレートを反映させようとしているのですがうまくいきません。
https://www.youtube.com/watch?v=DJ6PD_jBtU0
ソースコードです。
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