最近、Vueを勉強し始めた初心者(猫本で勉強中)なのですが、Laravel5.7の環境でVueを使用しています。
バックエンドとフロントは分業で、SPAではなく各ページに対応したbladeにvueのコンポーネントを置いています。
ディレクトリ構成や処理/ファイルのまとめ方などが探しても中々見つからなくご教示頂きたく質問させて頂きました。
現在の構成はこんな感じなのですが、何がよくて何が間違っているのかわからない状況です。
resources
├ js/
| ├ components/
| └ page/
| ├Hoge.vue
| └Top.vue
| └ app.js
├ lang/
├ sass/
└ views/
| ├ hoge/
| └ hoge.blade.php
└ top.blade.php
■app.js
require('./bootstrap'); window.Vue = require('vue'); /*************************** page ***************************/ Vue.component('top', require('./components/page/Top.vue')); Vue.component('hoge', require('./components/page/Hoge.vue')); const top = new Vue({ el: '#top' });
■top.blade.php
<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title></title> <link rel="stylesheet" href="{{ mix('/css/app.css') }}"> </head> <body> <div id="top"> <top></top> </div> <script src=" {{ mix('js/app.js') }} "></script> </body> </html>
■Top.vue
<template> <div class="l-wrap"> <hoge></hoge> </div> </template> <script> module.exports = { data() { return { } } } </script>
また、laravel側とのデータ受け渡しをする際は、各vueファイルに処理を記載すればいいのでしょうか?
何卒、よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/26 03:50
2018/10/26 04:06
2018/10/26 04:09