LaravelMixでVue.jsをHelloWorldしたい!
laravemix

どうもです。Vue.jsを仕事で使うことがあったので、覚えたことを記事にして行きたいと思います。というわけで、第1回目はLaravelMixでVue.jsを使う超簡単なサンプルを作って行きたいと思います。

この記事の対象者
  • Laravel6系のインストールが済んでいる
  • Nodeのインストールが済んでいる
  • LaravelMixでapp.js以外のファイルを出力したい
  • HelloWorldしたい

前提条件のLaravelインストールやNodeのインストールは今後の記事のネタとして、また機会を見て書いて行きたいと思います!

LaravelMixとは?

知ってる範囲で簡略化すると、Webpackという、散らかりがちなフロントエンドのファイル(JSやCSS)などをやろうと思えば1ファイルで管理できるツールですが、これを使いやすいように予め設定しておいてくれているのがLaravelMixです。この記事では、LaravelMixでVue.js使ったJavaScriptをコンパイルしてHelloWorldするのが目的なので、この程度の理解でOKです。

LaravelMixの有効化

インストールと書こうかと思いましたが、Laravelインストールした時点で、LaravelMixを使う為のレシピがpackage.jsonに書いてあるので、Nodeがインストールされているのが前提ですが、コマンドを叩くだけでOKです。コマンドは下記です。

npm install

LaravelでViewファイルを作成

JavaScriptを動作させるためのViewファイルを用意します。こんな感じです。コメントにはファイルへのパスを書いてます。laravelはプロジェクトの根っこフォルダです。プロジェクトルートディレクトリって自分は読んでます。

// laravel/resouces/test.blade.php

<html>
<head>
</head>
<body>
<div id="test">
</div>
</body>
</html>

LaravelでViewへのルートを敷く

ルートを敷くっていう表現が自分的にはしっくり来るので書いてます。このページにアクセスする為に、どんなURIを設定しますか?ということになります。web.phpで設定できます。

// laravel/routes/web.php

Route::get('/vue', function () {
    return view('test');
});

// /vueにした場合
// http://example.com/vue
// でアクセスすると、さっき書いたViewが表示されるようになります。

コメントの通りなので、vue以外の名前にすれば、ドメイン以下が変わります。面白いので試してみてください。

Laravel内にJavaScriptファイルをつくる

次にJavaScriptファイルを作って行きますが、
laravel/resources/jsに自分は筋っぽいのでファイルを作るようにしてます。

// laravel/resources/js/vuetest.js

import Vue from 'vue'

const ex = new Vue({
    el: '#test',
    data: {
        say: 'hoooooooo おおおおおおおおおおおおおおおおおお'
    }
});

こんな感じっす。import VueでVue.jsを読み込んでます。

JavaScriptのビルド先を設定する

デフォルト設定のままビルドすると、app.jsしかビルドされないので、新しく追加したvuetest.jsのビルド先を設定します。webpack.mix.jsに設定します。

// laravel/webpack.mix.js


mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .js('resources/js/vuetest.js', 'public/js');  // これ追加




これでpublic/jsに出力します。

JavaScriptをビルドする

dosか何かでlaravelのプロジェクトルートディレクトリまで移動して、何れかのコマンドでJavaScriptをビルドします。

npm run dev開発用としてビルドします。1回だけです。
npm run watch開発用としてビルドしますが、ファイルに更新がある度にビルドします。
npm run prod本番用として圧縮してビルドします。

npm run watchで変更のたびにビルドだと重い場合はnpm run watch-pollとすると、定期的にビルドが行われるので、こちらを使いましょう。ちなみにコマンドは、package.json見れば、書いてあります。

待望のVue.jsでHelloWorld

やぁ!お付き合い頂きありがとう!待望のHelloWorldだよ!というわけでBladeファイル変更してやりましょう。

<html>
<head>
</head>
<body>
<div id="test">
    @{{say}}
</div>
</body>
<script src="{{asset('js/vuetest.js')}}"></script>
</html>

出る文字、hello worldじゃないけど、気になるならVueの書いてあるファイルを変更してくれ!おやすみー!

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事