備忘録

備忘録

LaravelでVue.jsを使う方法

Ⅰ. はじめに

タイトルの通り「LaravelでVue.jsを使う方法」です。
LaravelにデフォルトでインストールされているLaravel Mixを利用する事でVue.jsの利用が簡単に出来ます。

Ⅱ. やり方

1. Laravelをインストールする
composer create-project laravel/laravel project-name --prefer-dist
2. パッケージをインストールする
composer install
npm install
3. Webpackを実行する

ファイル変更を監視させ、アセットを自動的に再コンパイルさせます

npm run watch
4. welcome.blade.php を編集する

project-name/resources/views/welcome.blade.php を以下の通り編集します

<!doctype html>
<html lang="{{ app()->getLocale() }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  </head>
  <body>
    <div id="app">
      <div class="container">
        <example-component></example-component>
      </div>
    </div>

    <script src="{{ asset('js/app.js') }}"></script>
    <!-- Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>
5. Webサーバを起動する
php -S 0.0.0.0:8000
実行結果

f:id:kagasu:20180505180051p:plain

その他

.vue ファイルの場所
project-name/resources/assets/js/components/
Vue.js用のESLint環境を用意する方法

https://kagasu.hatenablog.com/entry/2018/05/19/201521