Laravel 5.4 ＋Vue.jsでコンポーネント開発する環境を整えるメモ(Stylusも使う版)
Laravelで、Vue.jsの親子コンポーネントを使える状態にする手順です。
「Laravelの基礎は分かるんだけど、急に仕事でVue.js使い始めたので、個人的に勉強したいけど、公式見ながら初めからやる余裕がない！」
もしくは、
ドットインストールとかで、vue.js自体は何となくわかったけど、実際LaravelでVue.jsを使う時は、コンポーネント開発が基本となるので、
「手っ取り早く、Laravel+Vue.jsでコンポーネント開発出来る状態にしたい」
人向けです。
Laravel5.4をインストールする。
composerを使用してインストールします。（composerは別途インストールする。）
プロジェクトを置きたいディレクトリ直下で、以下コマンドを実行する。
“vue_test”の部分は、プロジェクトのフォルダ名なので自分の好きな名前を記載する。
|
1 |
composer create-project "laravel/laravel=5.4.*" vue_test |
Vue.js、Sass、jQuery、Laravel Mix等を使う環境をインストールする
プロジェクトフォルダ直下にある「pacage.json」を確認する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ ・・・・略・・・ "devDependencies": { "axios": "^0.15.3", "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "jquery": "^3.1.1", "laravel-mix": "^0.8.3", "lodash": "^4.17.4", "vue": "^2.1.10" } } |
標準で、Vue.js、jQuery、Laravel Mixがインストールできるようになっているので、「npm install」を実行し、ライブラリをインストールする。
|
1 |
npm install |
エラーとなる場合に確認すること
- 事前にNode.jsをインストールしていること。
- 事前にnpmがインストールされていること。
- Node.jsとnpmのバージョンを上げる。
Node.jsとnpmのバージョンの組み合わせでエラーとなる事が多い。
自分が試した時は、以下のバージョンで成功。
|
1 2 3 4 |
$ npm -v 4.2.0 $ node -v v7.8.0 |
他プロジェクトや仕事で使用するバージョンが決まっている時は、複数バージョンを管理（切替）できる状態にしておく。
- Node.jsのバージョンを管理するライブラリ「n」→参考サイト
インストール完了したら、Vue.js、jQuery、Laravel Mix(Vue.jsや、Stylusのコンパイル等)の使用が可能となる。
Vue.jsのセットアップ
Vueの起動処理等は resources/assets/js/app.js に記述します。
resources/assets/js/app.js に、Vue.jsの初期化処理(ライブラリの読み込み)の記述があるので確認する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** * 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. */ require('./bootstrap'); window.Vue = require('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. */ Vue.component('example', require('./components/Example.vue')); const app = new Vue({ el: '#app' }); |
これで、Vue.jsを使用することができます。
親コンポーネントを使用する。
まずは親コンポーネントの作成をします。
resources/assets/js/components/Example.vueは使わないのでParent.vueというファイル名でリネームします。
次に、resources/assets/js/components/Parent.vueを以下のように編集します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!--templateには、コンポーネントのHTMLを記述します。--> <template> <div class="parent-area"> <h1 class="title">親コンポーネント</h1> </div> </template> <!--scriptには、コンポーネントの動作を、JavaScriptで定義します。--> <script> export default { mounted() { console.log('親のコンポーネントが作成されたよ。') } } </script> <!--styleタグには、コンポーネントに適用するCSSを記述します--> <!--(Stylusや、Sassを使用する場合はlang属性に記述します) --> <style lang="stylus"> .parent-area background-color black >.title color #fff </style> |
app.jsにParentコンポーネントを登録します。
|
1 2 3 4 5 6 7 8 9 10 |
require('./bootstrap'); window.Vue = require('vue'); Vue.component('parent', require('./components/Parent.vue')); // ★exampleコンポーネントは削除しておく。 const app = new Vue({ el: '#app' }); |
最後に、作成したvueファイルや、app.jsを一括でコンパイルします。コンパイルには以下のコマンドを実行します。
|
1 |
npm run dev |
しかし、このまま、npm run devを実行すると、「Can’t resolve ‘stylus-loader’」エラーが出てしまいます。
今回は、CSSプリプロセッサとしてstylusを使いたいので、「webpack.mix.js」に追記する。
|
1 2 3 4 5 |
const { mix } = require('laravel-mix'); mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css/') .stylus('resources/assets/stylus/app.styl', 'public/css/stylus.css');//追記 |
この記述を追加することで、Parent.vueでかいたstylusの内容も含めて「public/css/stylus.css」にコンパイルされるようになります。
★ひとまず、「resources/assets/stylus/app.styl」を空で良いので新規作成しておくこと。
再度、「npm run dev」をし、コンパイルが成功するか確認する。
成功すると、
public/js/app.js
public/css/app.css
public/css/stylus.css
にコンパイルされたjs、cssファイルが作成されるので、laravelのbladeで読み込めば、利用可能となります。
※「npm run dev」でこまめにコンパイルで確認するのが大変な場合、「npm run watch」を走らせておくと、vueファイルやJavaScript・CSSを保存した際に自動的にコンパイルが行われるので、実装ミスを早い段階で確認することができます。
Laravelのbladeで親コンポーネントを読み込む。
/resources/views/welcome.blade.phpを以下のように書き換えます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Laravel</title> <!--★CSSファイル読み込み--> <link rel="stylesheet" type="text/css" href="css/app.css"> <link rel="stylesheet" type="text/css" href="css/stylus.css"> </head> <body> <div id="app"> <!--★Parentコンポーネントの表示--> <parent></parent> </div> <!--★jsファイル読み込み--> <script type="text/javascript" src="js/app.js"></script> </body> </html> |
画面を表示する。
親コンポーネントが表示できたので、次に親コンポーネントに子コンポーネントを読み込ませます。
子コンポーネントを使用する。
resources/assets/js/components/Children.vueを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<template> <div class="children-area"> <h2 class="title">子コンポーネント</h2> </div> </template> <script> export default { mounted() { console.log('子のコンポーネントが作成されたよ。') } } </script> <style lang="stylus"> .children-area background-color blue >.title color #aaa </style> |
次に親コンポーネントに子コンポーネントを読み込ませます。
resources/assets/js/components/Parent.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div class="parent-area"> <h1 class="title">親コンポーネント</h1> <!--★子コンポーネントを表示--> <children></children> </div> </template> <script> // ★子コンポーネントを読み込む Vue.component('children', require('./Children.vue')); export default { mounted() { console.log('親のコンポーネントが作成されたよ。') } } </script> <style lang="stylus"> .parent-area background-color black >.title color #fff </style> |
画面を開きます。
子コンポーネントも表示されました。
後は、このサイトの「第2回 Vue.js基礎文法最速マスター」から、勉強などなど始めれば、スムーズに実務で使えるレベルになると思います。
この記事がお役に立てたら、是非シェアをお願いします^^
-
-
-
-
1
-
-
■さがっと
沖縄とタスク管理が大好きな1985年生まれ。
2015年に大手メーカー(SIer)から転職し、一端のWEBエンジニア目指してLaravel、Vue.jsなどなど現場で習得中です。
並行してタスク管理WEBサービスを設計中。
