Q&A
<example><example>と記載されていますがコンポーネント名は正しいですか？
ぱっと見example-componentかと思ったのですが
Larabelを勉強しているものです。
https://techacademy.jp/magazine/11521
上記のサイトを参考にLarabelの環境構築を行いました。
http://localhost:8000の動作確認が終わった後にExampleComponent.vueのテンプレートを表示かできるかどうかを確認したのですが
テンプレートが表示されませんでした。
以下、実装内容です。
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 23Vue.component('example-component', require('./components/ExampleComponent.vue').default); 24 25/** 26 * Next, we will create a fresh Vue application instance and attach it to 27 * the page. Then, you may begin adding components to this application 28 * or customize the JavaScript scaffolding to fit your unique needs. 29 */ 30 31const app = new Vue({ 32 el: '#app' 33});
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 <meta name="csrf-token" content="{{ csrf_token() }}"> 7 <title>Laravel</title> 8 9 <!-- Fonts --> 10 <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css"> 11 12 <!-- Styles --> 13 <style> 14 html, body { 15 background-color: #fff; 16 color: #636b6f; 17 font-family: 'Nunito', sans-serif; 18 font-weight: 200; 19 height: 100vh; 20 margin: 0; 21 } 22 23 .full-height { 24 height: 100vh; 25 } 26 27 .flex-center { 28 align-items: center; 29 display: flex; 30 justify-content: center; 31 } 32 33 .position-ref { 34 position: relative; 35 } 36 37 .top-right { 38 position: absolute; 39 right: 10px; 40 top: 18px; 41 } 42 43 .content { 44 text-align: center; 45 } 46 47 .title { 48 font-size: 84px; 49 } 50 51 .links > a { 52 color: #636b6f; 53 padding: 0 25px; 54 font-size: 13px; 55 font-weight: 600; 56 letter-spacing: .1rem; 57 text-decoration: none; 58 text-transform: uppercase; 59 } 60 61 .m-b-md { 62 margin-bottom: 30px; 63 } 64 </style> 65 </head> 66 <body> 67 <div class="flex-center position-ref full-height"> 68 @if (Route::has('login')) 69 <div class="top-right links"> 70 @auth 71 <a href="{{ url('/home') }}">Home</a> 72 @else 73 <a href="{{ route('login') }}">Login</a> 74 75 @if (Route::has('register')) 76 <a href="{{ route('register') }}">Register</a> 77 @endif 78 @endauth 79 </div> 80 @endif 81 82 <div class="content"> 83 <div class="title m-b-md"> 84 Laravel 85 </div> 86 87 <div class="links"> 88 <a href="https://laravel.com/docs">Documentation</a> 89 <a href="https://laracasts.com">Laracasts</a> 90 <a href="https://laravel-news.com">News</a> 91 <a href="https://nova.laravel.com">Nova</a> 92 <a href="https://forge.laravel.com">Forge</a> 93 <a href="https://github.com/laravel/laravel">GitHub</a> 94 </div> 95 </div> 96 </div> 97 <div id="app"> 98 <example></example> 99 </div> 100 <script src="js/app.js"></script> 101 </body> 102</html> 103
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}); 17
ExampleComponent.vue
Vue
1<template> 2 <div class="container"> 3 <div class="row justify-content-center"> 4 <div class="col-md-8"> 5 <div class="card card-default"> 6 <div class="card-header">Example Component</div> 7 8 <div class="card-body"> 9 I'm an example component. 10 </div> 11 </div> 12 </div> 13 </div> 14 </div> 15</template> 16 17<script> 18 export default { 19 mounted() { 20 console.log('Component mounted.') 21 } 22 } 23</script>
表示された画面
Larabelにお詳しい方がいましたらご回答いただけないでしょうか？
よろしくお願いいたします。
回答2件
0
ベストアンサー
resources/views/welcome.blade.php
✖️：<example></example> ◯：<example-component></example-component>
こうするといかがでしょうか？
resources/js/app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
こちらの記述で「./components/ExampleComponent.vue」を「example-component」という名前で登録しているのでそれに添わせる必要があるかと。
あと、表示系で考えられるとすると
先の方も指摘していらっしゃいますが、
アプリケーションルートでの
npm install (またはyarn install)
npm run dev (またはyarn run dev)
が考えられるかと思います。
投稿2020/10/21 04:55
総合スコア7
0
LaravelでVueファイルの動作を確認するには、package.jsonファイルがあるディレクトリで、以下のコマンドを実行します。
npm run dev
実行にはnodejsが必要です。
特に何も設定していなければ、localhost:3000で動作が確認できるはずです。
投稿2019/01/13 15:32
総合スコア252
あなたの回答
tips
プレビュー
