2022/2/16

【SPA】Laravel×Vue.jsの開発環境構築方法！一連の流れとライブラリの導入

この記事からわかること

LaravelとVue.jsを使った環境構築方法
ライブラリのインストール方法とおすすめライブラリ

index

[open]

Laravel×Vue.jsの開発環境を構築しよう！
前提
Laravelをプロジェクトを作成
Laravel/uiでVueとAuthの導入
Vue.jsライブラリ(Router/Vuex/Element Ui)の導入

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

1つのページを基準にコンテンツだけ切り替えて表示させるSPA(Single Page Application)。ユーザビリティーや汎用性の高いアプリケーションが作成可能ですが、開発環境を構築する流れは忘れてしまいがちです。

SPA開発の主流である「PHPのフレームワークであるLaravel」と「Ui構築に長けたJavaScripフレームワークVue.js」を使った開発環境の構築方法をまとめていきたいと思います。

Laravel×Vue.jsの開発環境を構築しよう！

今回作成していく、開発環境に組み込むライブラリやフレームワークを先にまとめておきます。

フレームワーク

Laravel

Vue.js

ライブラリや機能

Auth(ユーザ認証機能)

bootstrap(CSSチート/デフォルトで組み込み済み)

Vue Router(ルーティング機能)

Vuex(データやメソッドの管理)

Element Ui(UIチート)

アプリを作る上で基本必要になってくる認証機能やVueのルーティング機能、開発効率を上げるためのbootstrapとElement Ui、そして扱うデータとメソッドを一元管理できるVuexを組み込んだ開発環境を作っていきます。

前提

環境構築はコマンドラインでの操作になります。Laravelをインストールする上で「Homebrew(Macの場合)」や「Composer」などが必要になりますので未導入であればインストールしておいてください。またその流れで「Laravel本体」もインストールしておきます。

わからない場合はコマンドライン上でそれぞれのバージョンを確認してみてください。

$ brew -v
Homebrew 3.3.4
$ composer -v
Composer version 2.1.12 2021-11-09 16:02:04
$ laravel -v
Laravel Installer 4.2.9

AuthやVue.jsを扱う上では「Node.js」があると便利です。こちらも同様にインストールしておきます。

$ node -v
v16.13.0

前提として導入しておくもの

Homebrew(Macのパッケージ管理ツール)
Composer(PHPのライブラリやフレームワークを管理できるツール)
Node.js(Javascript環境)

Laravelをプロジェクトを作成

まずはプロジェクトの大元となるLaravelプロジェクトを作成します。

コマンドラインを開き、カレントディレクトリをデスクトップにしておきます。

$ cd desktop

次にlaravel new アプリ名でプロジェクトを生成します。successfully.と出ていれば成功です。

$ laravel new originalapp

_                               _
| |                             | |
| |     __ _ _ __ __ ___   _____| |
| |    / _` | '__/ _` \ \ / / _ \ |
| |___| (_| | | | (_| |\ V /  __/ |
|______\__,_|_|  \__,_| \_/ \___|_|

Creating a "laravel/laravel" project at "./originalapp"

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
Application key set successfully.

Laravel/uiでVueとAuthの導入

カレントディレクトリを作成したアプリ内に移します。

$ cd originalapp

Laravel/uiの導入

AuthとVueを導入するには、Laravel/uiパッケージを使います。Laravel/uiとはフロントエンドフレームワークであるVue.jsやBootstrapなどをLaravelで使用するようにできるパッケージです。

$ composer require laravel/ui 
  
Using version ^3.4 for laravel/ui
./composer.json has been updated
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
No publishable resources for tag [laravel-assets].
Publishing complete.

VueとAuthの導入

続いてVue.jsとAuthを同時にインストールしていきます。

$ php artisan ui vue --auth

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

この表示が出ていれば成功です。続いて上記の指示通りnpm install && npm run devを入力します。

$ npm installはNode.jsのコマンドで指定のパッケージをプロジェクトにインストールするためコマンドです。プロジェクト作成時に最初にやるコマンドという認識で良いと思います。

$ npm install

npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.

$ npm run devはプログラムのコードに問題がないかを解析して、実行できる形に変換するため(ビルドする)のコマンドです。プロジェクト内のVueなどを編集したら、ビルドしないと変更が反映されないので注意してください。ちなみにコマンドは状況に応じて使い分けてください。

// 開発用
$ npm run dev 
// 常時
$ npm run watch
// 本番用
$ npm run prod

Vue.jsライブラリ(Router/Vuex/Element Ui)の導入

次にVue.jsのライブラリたちを導入していきます。

// Vue Router
$ npm install vue-route 
// Vuex
$ vue add vuex
// Element Ui
$ vue add element

Element Uiのみインストール時に問いかけがあるので適宜返答します。

$ vue add element 
// エレメントを導入するレベルは？
? How do you want to import Element? 
Fully import       // フルインストール
❯ Import on demand // オンデマンド(欲しいのだけ選んで)

// ロケール(地域設定)は？
? Choose the locale you want to load 
❯ ja  // 日本

オンデマンドでインストールした方が容量が軽く、必要なものだけ取り込めるので見通しもよくなります。必要なものを選択して取り込む方法は下記リンクに記載していますので参考にしてください。

これでプロジェクトの環境構築が完了しました。一連のコードをおさらいしてみます。

// デスクトップに移動
$ cd desktop

// laravelプロジェクトを生成
$ laravel new originalapp

// プロジェクト内に移動
$ cd originalapp

// $ laravel/uiを導入
$ composer require laravel/ui 

// VueとAuthの導入
$ php artisan ui vue --auth

// パッケージをインストール
$ npm install

// ビルド
$ npm run dev 

// Vue Router
$ npm install vue-route 

// Vuex
$ vue add vuex

// Element Ui
$ vue add element