書くこと
- Laravelのプロジェクト作成
- UIにVueを使えるようにする
- Vueのサンプルコンポーネントを表示してみる
本題
プロジェクト作成
コマンドでプロジェクト作成。
PROJECT_NAMEのプロジェクトフォルダが作成される。
composer create-project laravel/laravel PROJECT_NAME
作成したら移動しておく。
移動を忘れると後から行うパッケージインストールがプロジェクトの外にされるので注意。
cd PROJECT_NAME
Laravelを実行するのは下記のコマンド
php artisan serve
成功すると「Laravel development server started: http://127.0.0.1:8000 」と出てくる。
http://127.0.0.1:8000 にアクセスしてLaravelのウェルカムページが出てくればOK。
（localhost:8000でもいい）
Vueのインストールと有効化
パッケージをインストールして、UIにVueを使うように設定。
composer require laravel/ui
php artisan ui vue --auth
2個目のコマンドを実行した時点で、resources/js/componentsにExampleComponentというサンプルのVueコンポーネントが作成される。
実行後、「Please run "npm install && npm run dev" to compile your fresh scaffolding.（npm installとnpm run devも実行してね）」
と言われるので実行。
npm install
npm run dev
Vueに必要なモジュールのインストールとビルドをしていると思う。
Vueコンポーネントのコードを変更するたびにnpm run devを実行する必要がある。
コンポーネント登録を自動化
デフォルトだと、新しくVueコンポーネントを作成したらresources/js/app.jsにコンポーネントを登録する必要がある。
app.jsを開いて見てみると、先ほどのコマンドで作成されたExampleComponentがすでに登録されている。
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
が、その上に
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
という記述があり、コメントアウトされている2行のコードを有効にすれば自動でコンポーネントが登録されるようになる。
これでもともと書かれていたExampleComponentの登録も行われるため、ExampleComponentの登録処理は念のためコメントアウトしておく。
// コメントアウトを外す
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
// 一応コメントアウトしておく
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
ExampleComponentを表示してみる
resources/views/layouts/app.blade.phpを開く。
このファイルはUI設定のコマンドで自動生成される。
ここまでの段階で既に作成されているはず。
idにappが設定されているdiv要素がある。
ExampleComponentを表示するよう書き加えてみる。
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
省略
</head>
<body>
<div id="app">
<!-- 追加 -->
<example-component></example-component>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
省略
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
この状態で http://127.0.0.1:8000 にアクセスするとExampleComponentの内容が表示されるようになる。