Laravel9＋Vue2＋VuetifyでSPA環境構築
はじめに
こちらの記事の続きなので、LaravelのDocker環境を構築した前提で書きます。
また、前回の記事を書いてるタイミングでLaravel9が出たんでせっかくだから９でやります。
BladeとRouteを設定
Bladeを作成
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>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
</html>
ルーティング変更
ルーティング設定で常にappを表示するよう設定。
Route::get('/{any?}', function () {
return view('app');
})->where('any', '.+');
Vueセットアップ
Vueのインストール
下記コマンドでVueをインストール。
Vuetifyを入れたいので2．６で入れます。
npm install vue@2.6 --save-dev
package.jsonを確認してしっかりインストールされていることを確認。
"devDependencies": {
(略),
"vue": "^2.64",
}
Vueの設定あれこれ
app.jsファイルを開き、元の記述を削除して下記に書き換えます。
require('./bootstrap');
import Vue from 'vue'
new Vue({
el: '#app',
template: '<h1>Hello world</h1>'
})
次にwebpack.mix.jsを開いてLaravelMixの設定にVueを使用するよう追加。
mix.js('resources/js/app.js', 'public/js').
vue(). //←これを追加
postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
この状態でnpm run devを実行すると、vue-loaderが足りないと怒られます。
npm run dev
> @ dev /var/www/html/lara_base
> npm run development
> @ development /var/www/html/lara_base
> mix
Additional dependencies must be installed. This will only take a moment.
Running: npm install vue-template-compiler vue-loader@^15.9.7 --save-dev --legacy-peer-deps
Finished. Please run Mix again.
コンソールに表示されているコマンドでインストールして再度ビルド実行。
npm install vue-template-compiler vue-loader@^15.9.7 --save-dev --legacy-peer-deps
npm run dev
✔ Compiled Successfully in 1653ms
┌───────────────────────────────────────────────────────┬─────────┐
│ File │ Size │
├───────────────────────────────────────────────────────┼─────────┤
│ /js/app.js │ 924 KiB │
│ css/app.css │ 29 KiB │
└───────────────────────────────────────────────────────┴─────────┘
webpack compiled successfully
成功！ヤッタネ！
SPA環境構築
ページ遷移したりSPAっぽくしていきます。
VueRouterをインストール
VueRouterをインストール。
npm install -D vue-router@3
※Vue-router４以降はVue3向けのため3を入れます。
Rootコンポーネント作成
全ての元になる下記のRootコンポーネントを作成
<template>
<div>
<main>
<div class="container">
<RouterView />
</div>
</main>
</div>
</template>
表示するページを作成。
とりあえず適当にWelcomeとAoutページを作成。
resouce/js下に「Pages」ディレクトリを作成して、Welcome.vueとAbout.vueを追加します。
<template>
<h1>About!</h1>
</template>
<template>
<h1>Welcome(ようこそ)!</h1>
</template>
ルーティング作成
JS側のルーティングを作成します。
jsディレクトリ下にrouter.jsを作成。
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from './Pages/About.vue'
import Welcome from './Pages/Welcome.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: Welcome
},
{
path: '/about',
component: About
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
app.jsを編集
最後にapp.jsを編集してrouterやRootページを読み込む設定を記述します。
require('./bootstrap');
import Vue from 'vue'
import router from './router' // 追加
import App from './App.vue' // 追加
new Vue({
el: '#app',
router, // 追加
components: { App }, ///追加
template: '<App />' // ルートコンポーネントを描画する
})
表示確認
Laravelサーバを起動して確認します。
下記コマンドを叩いてビルド＆テスト用サーバ起動
npm run dev
php artisan serve --host=0.0.0.0 --port=8081
http://127.0.0.1:8081/ にアクセスすると変態仮面のセリフが表示され、
http://127.0.0.1:8081/about へアクセスするとAboutページが表示されます。
やったね！
Vuetify導入
Vuetifyをインストール
これだけだと味気ないのでVuetifyを入れてきれいにします。
コマンドでVuetifyと依存関係をインストール。
npm install vuetify -D
npm install sass@~1.32 sass-loader deepmerge -D
app.js変更
app.jsを下記内容に書き換えます。
require('./bootstrap');
import Vue from 'vue'
import router from './router'
import App from './App.vue'
import Vuetify from 'vuetify'; // 追加
Vue.use(Vuetify);
new Vue({
el: '#app',
router,
components: { App },
template: '<App />',
vuetify: new Vuetify(), //追加
})
装飾ファイルを読み込む
sassディレクトリを作成して中に下記内容でapp.scssを設置します。
@import '~vuetify/dist/vuetify.min.css';
SCSSのビルド設定を記載
webpack.mix.jsにresource/cssではなくsassディレクトリ内のファイルを読み込むよう変更します。
末尾に下記を追記してください。
mix.sass('resources/sass/app.sass', 'public/css'); //追加
この状態でnpm run devを実行すると、resolve-url-loaderが足りないと怒られます。
npm run dev
> @ dev /var/www/html/lara_base
> npm run development
> @ development /var/www/html/lara_base
> mix
Additional dependencies must be installed. This will only take a moment.
Running: npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
Finished. Please run Mix again.
表示されているコマンドでインストールして再度ビルド実行すると問題なく通ります。
コンポーネントの設置
Vuetifyを使えるようにAｐｐ.vueを書き換えます。
<template>
<v-app>
<v-main>
<v-container>
<RouterView />
</v-container>
</v-main>
</v-app>
</template>
次にWelcome.vueにカードコンポーネントを記載。
<template>
<v-card class="mx-auto" max-width="344" outlined>
<v-list-item three-line>
<v-list-item-content>
<div class="text-overline mb-4">OVERLINE</div>
<v-list-item-title class="text-h5 mb-1"> Headline 5 </v-list-item-title>
<v-list-item-subtitle
>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle
>
</v-list-item-content>
<v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn outlined rounded text> Button </v-btn>
</v-card-actions>
</v-card>
</template>
表示確認
最後にhttp://127.0.0.1:8081/ にアクセスするとカードコンポーネントが表示されます。
疲れた．。。
今回の内容は下記に置いておきます。
参考
Discussion