ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

Laravel+Vue.js+Vue-Router+Vuetifyの環境構築

あけましておめでとうございます。

タイトルのとおり

LaravelをAPIにしてVue.js+Vue-router+VuetifyでSPAを作る環境構築をやって行きたいと思います。

//これは蛇足ですが

少し前までは「クソ記事アルファベットばっか使ってんじゃねーよ!!」って思っていましたが、それ以外で書くと逆に表現しづらいということが分かってきました。

//蛇足ここまで

Vue Routerとはなんぞや?

まずSPA(シングルページアプリケーション)ってどうやってできてるかって言うと、

<div id="app"></div>

このIDで指定したappの表示をjsで変えるって感じなんです。

ぶっちゃけ、これは生javascriptで一部表示を変えてたことをページ単位でやるだけですね。

そうすると問題が結構発生します。

「URL(パス)がずっと同じ問題」

「URL(パス)を指定して外から入って来れない」

「分かりずらい」

こんな感じの問題を解決したのがVue-Routerです。

URL(パス)を指定して表示するファイル(.vueファイル)を指定することができるのです。

たとえば、

const routes = [
    {
        path: "/foo",
        component: Foo
    },
    {
        path: "/bar",
        component: bar
    }
];

こんな感じで指定できますよ〜と。

おそらくいろんな記事を見てる人がいると思いますが

<vue-router></vue-router>

この部分に指定したコンポーネントが入ります。それ以外の部分は共通みたいな感じでHeaderとかFooterとか置いておく感じになるかと思います。

わしが作った表参道ランチマップ(現在閉鎖中)

https://lunch-app-16cce.firebaseapp.com/

これを見ると、どの部分がVue Routerで変わっているかが分かるかな〜と思います。

まぁ公式みるのが一番ですhttps://router.vuejs.org/ja/

Vuetifyってなんぞ・・・

UIマテリアルコンポーネントです。

HTML+CSSで言えばBootstrapみたいなやつですが、これはVue.jsで使えるやつ。

ボタンとかスライドとか、メニューバーとか簡単に作成できます。

わしが作った表参道ランチマップはVuetifyを使っています!

現在閉鎖中(2度目) https://lunch-app-16cce.firebaseapp.com/

Vue.jsをやるならVuetifyかElementUIは使わないといけないのかなぁと感じています。

補足は公式を見てみてください。https://vuetifyjs.com/ja/getting-started/quick-start

環境構築していきます

php @7.4,laravel v6.8

composer create-project laravel/laravel your-project-name--prefer-dist
composer require laravel/ui
php artisan ui vue
npm install && npm install vue-router vuetify

コマンド的には以上です。

何をしたのかざっくり説明するとLaravelのUIをVueですよ〜と指定してからvue-routerとvuetifyが使える環境にしたという感じです。

ローカルで起動してみましょう。

npm run watch
php artisan serve

VuetifyとVueRouterをプロジェクトで読み込む設定

現在開いているファイルはwelcome.blade.phpだと思います。

ほぼ消して、jsとcssファイルをassetで読み込むようにしてあげてください。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <title>Laravel</title>
        <link rel="stylesheet" href="{{asset('css/app.css')}}">


    </head>
    <body>
        <div id="app">
            <example-component/>
        </div>
        <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

app内にコンポーネントを指定しています。

これはresouces/js/components内にあるExampleComponent.vueファイルを読み込むことを意味しています。

これを指定しているのが、resouces/js/app.jsファイルなので、両方とも開いて確認してみてください。

試しにExampleComponent.vueファイルを適当に書き換えてみて表示が変わるかどうか確認してみてください。

ちなみにMAMPのローカルだと表示変わらないので前述の方法でサーバーを立ててみてください。

RouterとVuetify用のjsファイルを作成

resouces/jsフォルダ内にvuetify.jsを作成してください。中身は

import Vue from "vue";
import Vuetify from "vuetify";

Vue.use(Vuetify);

export default new Vuetify({});

これでokです。app.jsに書いても良いのですが、VuetifyのUIテーマとか設定を定義しだすことを想定すると、分けて置いた方がみやすくなります。

同じように、router.jsファイルを作成してください。

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
 
];

export default new VueRouter({ routes });

これでとりあえず良いです。

resouces/js/app.jsの中身を

require("./bootstrap");

window.Vue = require("vue");
import vuetify from "./vuetify";
import router from "./router";
import Example from "./components/ExampleComponent";

const app = new Vue({
el: "#app",
router,
vuetify,
components: {
"example-component": Example
    }
});

こんな感じにしてください。

bootstrapとjQueryをアンインストールします。

npm uninstall bootstrap jquery

resouces/js/bootstrap.jsの内容を7行目くらいのtry catch文を全て消しちゃってください。

resouces/sass/app.scssの内容を全部消しちゃって、

@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900");
@import url("https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css");
@import "~vuetify/dist/vuetify.css";

これだけ書き込んでください。これはVuetifyのアイコンを使うためのコードです。

https://vuetifyjs.com/ja/getting-started/quick-start

この辺に書いてあります。

CDNで今までタグ内で読み込んでいたのをこっちで読み込んでるだけ。

はい。これでVuetifyとVueRouterが使える環境が整いました。やったね!

おまけ

Vuetifyを使える範囲はで囲った部分だけです。

なので、welcome.blade.phpファイルを

  <v-app id="app">
            <example-component/>
  </v-app>

こうしてあげると便利だと思います。

ExampleComponent.vueファイルでVuetifyで試しに遊んでみてください。

例えば、

https://vuetifyjs.com/ja/examples/layouts/google-youtube

これをコピペすればyoutubeのUIが簡単に作れます。たのし〜〜。

VueRouterはrouter.jsに

import Test from './components/Test.vue

const routes = [
    {
        path: "/test",
        component: Test
    },
]

こんな感じにしてあげればパスで表示を変えれるはずです〜〜。 ちゃんと遷移させるボタンはrouter-link使ってくださいね!!

表示を変えたい部分は

このタグですからね!!

今回は以上です!

需要があれば一通りの流れ動画で取って無編集でYoutubeデビューしても良いですが熱いコメントない限りやらないと思います!