BETA

Laravel+Vue.jsでSPAを作るための基礎知識

投稿日:2018-12-21
最終更新:2018-12-21

vue.js導入について

おことわり

この記事ではLaravel+Vue.jsでSPAを作るために必要なもの、手順、ファイル構造などを解説する。
Vue.jsのScript構文などはここでは取り上げない。
記事末尾からVue.jsの公式リファレンスで確認。

必要なもの

  • nodejs(npmのため)
  • npm(nodejsにくっついてくる)
  • yarn(お好み。npmより処理が早い、らしい)
  • vue-router

概要

  • laravelには最初からvuejsが準備されている。
  • node-module(vue.js等)はnpm(nodejsのパッケージ管理ツール)で管理する。
  • 管理するパッケージ一覧はpackage.jsonに記載されている。

手順

  • npmを導入する。
yum -y install gcc-c++ make  
curl -sL https://rpm.nodesource.com/setup-6.x  
yum -y install nodejs  
  • node_moduleを導入
    larabelプロジェクトルートで以下実行
// yarnの導入  
(npm install yarn)  
// 管理パッケージにvue-routerを追加  
npm add vue-router  
(yarn add vue-router)  
// 管理パッケージをインストール  
npm install --dev  
(yarn install --dev)  

Laravel側の変更

routes/web.php

どのURLでリクエストがきても必ず一つのviewを返すようにする。

<?php  
Route::get('/{any}', function () {                                                                                                                                   
    return view('app');                                                                                                                                          
})->where('any', '.*');  

resources/views/app.blade.php

サーバーサイドがレスポンスする単一のview(名前は任意)を作成
<router-view></router-view>内にvue-routerがURLに応じたVueコンポーネントを埋め込む。
<example-component></example-component>のように、URLで変わらないVueコンポーネントはここに埋め込む(ナビバーなど)。

<!DOCTYPE html>                                                                                                                                                      
<html lang="{{ config('app.locale') }}">                                                                                                                             
    <head>                                                                                                                                                           
        <meta charset="utf-8">                                                                                                                                       
        <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>Vue TODO</title>                                                                                                                                      

        <link rel="stylesheet" href="css/app.css">                                                                                                                   

        <script>                                                                                                                                                     
            window.Laravel = {};                                                                                                                                     
            window.Laravel.csrfToken = "{{ csrf_token() }}";                                                                                                         
        </script>                                                                                                                                                    
    </head>                                                                                                                                                          
    <body>                                                                                                                                                           
        <div id="app">                                                                                                                                               
            <div class="container">                                                                                                                                  
                <example-component></example-component>                                                                                                              
                <router-view></router-view>                                                                                                                          
            </div>                                                                                                                                                   
        </div>                                                                                                                                                       
    </body>                                                                                                                                                          

    <script src="{{ mix('js/app.js') }}"></script>                                                                                                                 
</html>  

Vue.js側の変更

resources/assets/js/app.js

vue-routerを用意。ルーティングはここに記述。
VueRootもここに準備。

// node_moduleのimport  
import Vue from 'vue';                                                                                                                                               
import VueRouter from 'vue-router';                                                                                                                                  

require('./bootstrap');                                                                                                                                              
Window.Vue = require('vue');                                                                                                                                         

// vue-routerの使用宣言  
Vue.use(VueRouter);                                                                                                                                                  

// ルーティングしない場合のコンポーネントの宣言  
Vue.component('example-component', require('./components/ExampleComponent.vue'));   

// ルーティングするコンポーネントの宣言  
const routes = [                                                                                                                                                     
    {                                                                                                                                                                
        path: '/',                                                                                                                                                   
        component: require('./components/Index.vue')                                                                                                                 
    },                                                                                                                                                               
    {                                                                                                                                                                
        path: '/about',                                                                                                                                              
        component: require('./components/About.vue')                                                                                                                 
    },                                                                                                                                                               
    {                                                                                                                                                                
        path: '/login',                                                                                                                                              
        component: require('./components/Login.vue')                                                                                                                 
    }                                                                                                                                                                
];                                                                                                                                                                   

// vue-routerインスタンス  
const router = new VueRouter({  
    routes,                                                                                                                                                          
    mode: 'history'                                                                                                                                                  
});                                                                                                                                                                  

// rootのVueインスタンス  
const app = new Vue({  
    el: '#app',                                                                                                                                                      
    router                                                                                                                                                           
});         

resources/assets/js/components/

動的に変更する.vueファイル(単一ファイルコンポーネント)をここに準備。(Login.vue,About.vueなど)
<template></template>にhtmlを記載
<script></script>にvueインスタンス(js処理など)
<style></style>に独自スタイルを記載
詳細な書き方はVueリファレンス参照。
Vue.js日本語リファレンス

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@showyleeの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!