10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Vue3 + laravel10でSPA作成 ①環境構築

Last updated at Posted at 2023-05-05

はじめに

全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の略で、コードを修正すると再ビルドをしなくても自動で画面に反映させる仕組みになります。

vite.config.js
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を開き、以下のように編集します。

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を編集します。

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ファイルの中身になります。

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">
    @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の文字が表示されれば完了です。
image.png

#参考にしたサイト
Vue.js + LaravelでシンプルなSPA構築チュートリアル:概要編

10
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?