目次
はじめに
こちらは10本の記事で構成されています
- ①Vue.js & Laravel(環境構築)
- ②Vue.js & Laravel(CRUDシステムの準備)
- ③Vue.js & Laravel(Read…データベースからデータを取得)
- ④Vue.js & Laravel(Create…データベースにデータを保存)
- ⑤Vue.js & Laravel(Update…データベースのデータを更新)
- ⑥Vue.js & Laravel(Delete…データベースのデータを削除)
- ⑦Vue.js & Laravel(リアルなダミーデータを大量に挿入)
- ⑧Vue.js & Laravel(検索機能の実装)
- ⑨Vue.js & Laravel(ページャーの実装)
- ⑩Vue.js & Laravel(認証機能の実装)
目標
LaravelにVue.jsを埋め込んだフォルダを作成し、SPAの土台を作る
前提
前提①パソコンにnodeがインストールされている
こちらのコマンドで確認しましょう
$ node -v
v14.16.1
もしインストールされていない場合はこちらからインストール
前提②パソコンにcomposerがインストールされている
こちらのコマンドで確認しましょう
$ composer --version
Composer version 2.0.12
もしインストールされていない場合は(MAC)
$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer
これでインストール完了です。
実装
①フォルダの作成
$ cd [フォルダを作りたい階層]
(フォルダを作りたい階層に移動)
$ composer create-project "laravel/laravel=7.*" hoge
(「hoge」という名前でフォルダの作成)
$ cd hoge
(作成したフォルダの中に移動)
$ composer require laravel/ui:2
(UIの様々な機能導入)
$ php artisan ui vue
(vue導入)
$ php artisan ui vue --auth
(ログイン機能導入)
$ npm install --save vue-router
(vueルーター導入)
$ npm install
(npm導入)
それではサーバーを立ち上げて確認してみましょう!
$ npm run watch
(フォルダに変更がある度にビルド)
$ php artisan serve
(サーバーを立ち上げる)
ターミナルを2枚開き上記のコマンドを実行してください。
上記の2つのコマンドは開発中常に実行させます。
表示されたURLにアクセスしウェルカム画面が表示されれば成功!
これで「①フォルダの作成」は完了です!
②データベースへの接続
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=root
上記の部分を自身のデータベースの環境に合わせ書き換えましょう
$ php artisan migrate:refresh --seed
こちらを実行しテーブルが作成されれば「②データベースへの接続」が完了です
③Vue.jsとLaravelの接続
余分なファイルを無視
+ /public/js
+ /public/css
不要ファイルの削除、必要ファイルの作成
下記のコマンドでフォルダを整理します
$ rm resources/views/home.blade.php
$ rm resources/views/welcome.blade.php
$ rm app/Http/Controllers/HomeController.php
$ rm resources/js/components/ExampleComponent.vue
$ touch resources/views/app.blade.php
$ touch resources/js/components/AppComponent.vue
$ touch resources/js/components/Header.vue
$ mkdir resources/js/components/task
$ touch resources/js/components/task/Task.vue
$ mkdir resources/js/components/search
$ touch resources/js/components/search/Search.vue
$ mkdir resources/js/components/user
$ touch resources/js/components/user/User.vue
<?php
use Illuminate\Support\Facades\Route;
- /*
- |--------------------------------------------------------------------------
- | Web Routes
- |--------------------------------------------------------------------------
- |
- | Here is where you can register web routes for your application. These
- | routes are loaded by the RouteServiceProvider within a group which
- | contains the "web" middleware group. Now create something great!
- |
- */
Route::get('/', function () {
- return view('welcome');
+ return view('app');
});
Auth::routes();
- Route::get('/home', 'HomeController@index')->name('home');
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravue') }}</title>
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<app-component></app-component>
</div>
<script src="{{ mix('/js/app.js') }}" defer></script>
</body>
</html>
<template>
<div class="appComponent">
<Header />
<div class="container">
<router-view />
</div>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
components: {
Header,
},
};
</script>
<style>
button, input{
border: 1px solid black;
padding: 0 5px;
}
</style>
<template>
<div class="header">
<div class="header_nav">
<router-link to="/task">task</router-link>
<router-link to="/search">search</router-link>
<router-link to="/user">user</router-link>
</div>
</div>
</template>
<style scoped>
.header {
text-align: center;
background-color: #000066;
margin-bottom: 50px;
}
.header_nav {
padding: 30px;
}
.header_nav a {
color: white;
text-decoration: none;
font-size: 25px;
margin-right: 25px;
}
.header_nav a:last-child {
margin-right: 0;
}
.header_nav a.router-link-active {
color: #f3920b !important;
}
</style>
<template>
<div class="taskComponent">
タスク画面
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="searchComponent">
検索画面
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="taskComponent">
ユーザー画面
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>
<style lang="scss" scoped>
</style>
- /**
- * First we will load all of this project's JavaScript dependencies which
- * includes Vue and other libraries. It is a great starting point when
- * building robust, powerful web applications using Vue and Laravel.
- */
+ import VueRouter from 'vue-router';
require('./bootstrap');
window.Vue = require('vue');
- /**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
- // const files = require.context('./', true, /\.vue$/i)
- // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
- Vue.component('example-component', require('./components/ExampleComponent.vue').default);
+ Vue.component('app-component', require('./components/AppComponent.vue').default);
+ Vue.use(VueRouter);
+ const router = new VueRouter({
+ routes: [
+ {
+ path: '/task',
+ name: 'task',
+ component: () => import('./components/task/Task.vue'),
+ },
+ {
+ path: '/search',
+ name: 'search',
+ component: () => import('./components/search/Search.vue'),
+ },
+ {
+ path: '/user',
+ name: 'user',
+ component: () => import('./components/user/User.vue'),
+ },
+ ]
+ });
- /**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
- */
const app = new Vue({
el: '#app',
+ router
});
確認
こちらの画面が表示されれば成功です。