はじめに
全3回にわたり、簡単なToDoリストの作成を行っていきます。
今回の目標はプロジェクト作成~トップページにアクセスするところまでとなります。
ソースコードはUP済ですので、動かない場合にはご参照ください。
前提
・php
, npm
, composer
のパスが通っていること
・xampp
のインストール(任意)
※mysql
でローカルホストにDBをたてるために使用します。
プロジェクト作成
1.作成コマンド
任意のディレクトリで以下のコマンドを実行し、プロジェクトを作成します。
composer create-project --prefer-dist laravel/laravel TodoApp
2.各種ライブラリ追加
プロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。
今回はCSSフレームワークにVuetify
を使用します。一番下のコマンドはVuetify
でiconを使用する場合に追加します。
composer require laravel/ui
npm i @vitejs/plugin-vue
npm i vite-plugin-vuetify
npm i vue-router
npm i @mdi/font
3.vite.config.jsの編集
vite
(ビルドツール)の設定。
hmr
はhot module reloadの略で、コードを修正すると再ビルドをしなくても自動で画面に反映させる仕組みになります。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
+ import vue from '@vitejs/plugin-vue';
+ import vuetify from 'vite-plugin-vuetify'
export default defineConfig({
+ server: {
+ hmr: { host: 'localhost' },
+ host: 'localhost',
+ },
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
+ vue(),
+ vuetify(),
],
});
4.app.jsの編集
エントリポイントとなるapp.js
で使用ライブラリの読み込みを行います。
resources\js\app.js
を開き、以下のように編集します。
import './bootstrap';
+ import { createApp } from 'vue';
+ import{ createVuetify } from 'vuetify'
+ import App from "../views/App.vue"
+ import '@mdi/font/css/materialdesignicons.css'
+ import 'vuetify/dist/vuetify.min.css'
+ const app = createApp(App);
+ const vuetify = createVuetify();
+ app.use(vuetify)
+ app.mount('#app');
5.web.phpの編集
localhost:8000
以下のURLが何であってもapp.blade.php
を返すようにroutes\web.php
を編集します。
- Route::get('/', function () {
- return view('welcome');
- });
+ Route::get('/{any?}', fn() => view('app')) -> where('any', '.+');
6.app.blade.phpの作成
resources\views\welcome.blade.php
を削除し、同フォルダにapp.blade.php
を作成します。
手順5で同一のものを返すように設定したblade
ファイルの中身になります。
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@vite(['resources/css/app.css','resources/js/app.js'])
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Vue Laravel SPA') }}</title>
<!-- Styles -->
</head>
<body>
<div id="app">
</div>
<!-- Scripts -->
</body>
</html>
7.App.vueの作成
resources\views\App.vue
を作成します。
手順6で作成したblade
のdivタグの箇所に埋め込まれます。
<template>
test
</template>
動作確認
以下のコマンドでサーバとクライアントを起動します。
※私はコマンドプロンプトとVSCodeのターミナルで同時に起動しております。
・npm run dev
・php artisan serve
ブラウザを開きアドレスバーにhttp://localhost:8000
を入力し、ページにtest
の文字が表示されれば完了です。
#参考にしたサイト
Vue.js + LaravelでシンプルなSPA構築チュートリアル:概要編