①Vue.js & Laravelで簡単なCRUDシステムを作る（環境構築）

2023 2/20

2023-02-20 2023-02-21

はじめに

こちらは10本の記事で構成されています

目標

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
        （サーバーを立ち上げる）

ターミナルを２枚開き上記のコマンドを実行してください。
上記の２つのコマンドは開発中常に実行させます。

表示された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
});

確認

こちらの画面が表示されれば成功です。

初めてプログラミングに触る方は、TechAcademy [テックアカデミー]などの無料体験がオススメです！

次回

よかったらシェアしてね！

URLをコピーしました！