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

この記事からわかること

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

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

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

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

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

あとはプロジェクト内にコードを追記してアプリを完成させるだけです。良い開発を!!

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

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

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index