Laravel＋Vue.js＋Vue-Router+Vuetifyの環境構築
いつもご利用ありがとうございます。このブログは、広告費によって運営されています。
Laravel ＋ Vue.js ＋ Vue-Router+Vuetify の環境構築方法について記事にしていきます。
Vue Router とは？
さいしょに
まず SPA（シングルページアプリケーション）がどのようにできているかと言うと、
<div id="app"></div>この id で指定した app の表示を Javascript で変えるって感じです。
これは、今まで Javascript で一部表示を変えていたことを「ページ単位」でやるということです。
Vue は、それをメッチャ簡単に分かりやすく作れるようにしてくれたフレームワークです。
Vue Router の役割り
そうすると問題が結構発生します。
「URL（パス）がずっと同じ問題」
「URL（パス）を指定して外から入って来れない」
「分かりずらい」
こんな感じの問題を解決したのが Vue-Router です。
URL(パス）と表示するファイル（.vue ファイル）を指定することができます。
たとえば、
const routes = [
{
path: "/foo",
component: Foo,
},
{
path: "/bar",
component: Bar,
},
];こんな感じで指定ができます。
foo と、bar の 2 ページをそれぞれ別々のコンポーネントで作成できます。
おそらくいろんな記事を見てる人がいると思いますが
<vue-router></vue-router>この部分に指定したコンポーネントが入ります。それ以外の部分は共通みたいな感じで Header とか Footer とか置いておく感じになるかと思います。
Vuetify とは？
UI マテリアルコンポーネントです。
HTML ＋ CSS で言えば Bootstrap みたいなやつですが、これは Vue.js 専用で使えるものです。
事前に大量のコンポーネントを用意してくれていて、説明書のとおりに props を渡すことによってカスタマイズが可能です。
ボタンとかスライドとか、メニューバーとか簡単に作成できます。
環境構築をする
php @7.4
laravel v6.8コマンドで Laravel プロジェクトを作成します。
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コマンド的には以上です。
何をしたのかざっくり説明
composer create-project laravel/laravel your-project-name--prefer-dist①Laravel のプロジェクトを作成しました。
composer require laravel/ui②laravel/ui というパッケージをインストール
php artisan ui vue③laravel/ui というパッケージの中で vue を使用
npm install && npm install vue-router vuetify④npm install はもともと Laravel プロジェクトを作ったらしないといけないコマンドです。
⑤npm install vue-router vuetify で、VueRouter と Vuetify をインストールしています。
ローカルサーバーを起動
npm run watch
php artisan serve注意）MAMP などのローカルサーバーだと表示変わらないので、この方法でローカルサーバーを立てることをオススメします。
Vuetify と VueRouter を設定する
Laravel は初期設定だと、最初に表示されている画面を作っているファイルが
resources/views/welcome.blade.php だと思います
ダサいので（主観）
①routes/web.php を編集する
Route::get('/', function () {
return view('app');
});②resources/views/app.blade.php を作成し、下記をコピペしてください。
<!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">
<app-component></app-component>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html><div id="app">
<app-component></app-component>
</div>この部分が Vue で書き変わっていく範囲になり、VueRouter でページを切り替えることができます。
Router と Vuetify 用の js ファイルを作成する
resouces/js フォルダ内に vuetify.js を作成してください。
resouces/js/vuetify.js
import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);
export default new Vuetify({});app.js に書くことも可能ですが、分けて置いた方がみやすくなります。
同じように、router.js ファイルを作成してください。
resouces/js/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 AppComponent from "./components/AppComponent";
const app = new Vue({
el: "#app",
router,
vuetify,
components: {
//変更
"app-component": AppComponent,
},
});こんな感じにしてください。
resources/js/components/AppComponent.vue を作成し中身を
<template>
<div>これがおおもとのコンポーネントになります</div>
</template>bootstrap と jQuery をアンインストールします。
コマンド
npm uninstall bootstrap jqueryresouces/js/bootstrap.js を編集する
７行目くらいの 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 のアイコンを使うためのコードです。
この辺に書いてあります。
はい。これで Vuetify と VueRouter が使える環境が整いました。やった！
VueRouter を使う
このままでは VueRouter をどのように設置するか分からない気がしてきたので追記しています。
resources/js/components/AppComponent.vue を編集
<template>
<router-view></router-view>
</template>resources/js/router.js
import Test from './components/Test.vue
const routes = [
{
path: "/test",
component: Test
},
]resources/js/components/Test.vue
<template>
<div>テストページ</div>
</template>http://127.0.0.1:8000/testを開くとテストページが表示されたらGoodです。
Vuetify を使う
Vuetify を使える範囲は<v-app></v-app>で囲った部分だけです。
Vuetify を使える範囲は<v-app></v-app>で囲った部分だけです。
Vuetify を使える範囲は<v-app></v-app>で囲った部分だけです。大事なことなので 3 回書きました。
なので、resources/js/components/AppComponent.vue を編集
<template>
<v-app>
<router-view></router-view>
</v-app>
</template>こうしてあげると便利だと思います。
ちゃんと Vuetify が使えるかどうかの確認は、
<v-btn>テストボタン</v-btn>これを.vue ファイルのどこかに書いてちゃんと、ボタンがいい感じになったら成功です。
まとめ
以上です。
自分のためのメモで書いたものだったのですが、久々に自分で読んだらハイパー読みづらかったので書き直しました。
苦情・意見は Twitter の DM にお願いします。
それでは！
