目次
Laravelの記事一覧は下記
PHPフレームワークLaravelの使い方
Laravelバージョン
動作確認はLaravel Framework 7.19.1で行っています
前提条件
eclipseでLaravel開発環境を構築する。デバッグでブレークポイントをつけて止める。(WindowsもVagrantもdockerも)
本記事は上記が完了している前提で書かれています
プロジェクトの作成もapacheの設定も上記で行っています
LaravelでJavaScript、CSSを使う
本記事は上記が完了している前提で書かれています
#Vue.jsを使う準備
Laravelの認証(web画面)
を実行した人はもう準備が済んでいます
上記記事で行った
composer require laravel/ui
php artisan ui vue --auth
でVue.jsを使うのに必要なものがインストールされていました
やってない人は
composer require laravel/ui
php artisan ui vue
npm install
をしましょう
package.jsonを見てみるとvueが追加されているはずです
コンポーネント作成
/sample/resources/js/components/Sample.vue作成
<template>
<div>
<div>{{ message }}</div>
</div>
</template>
<script>
export default {
props: {
message: {title: String, default: 'hello world'}
}
}
</script>
コンポーネント登録
/sample/resources/js/app.jsに
Vue.component('sample', require('./components/Sample.vue').default);
を追記
‥‥
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('sample', require('./components/Sample.vue').default);
‥‥
app.jsを見るとVue.component('example-component', require('./components/ExampleComponent.vue').default);が既に書かれていたと思います。また、resources/js/components/ExampleComponent.vueが既に存在していたはずです
Laravelでは事前にapp.jsにVue.jsを使う準備ができており、開発者はそこにVue.jsのグローバルコンポーネントを登録すれば使えるようになっています
Controllerにメソッド追加
(1) /sample/app/Http/Controllers/SampleController.phpにvueメソッドを追記
public function vue()
{
return view('sample.vue');
}
(2) /sample/routes/web.phpに下記を追記
Route::get('sample/vue', 'SampleController@vue');
viewの作成
/sample/resources/views/sample/vue.blade.phpファイル作成
<html>
<head>
<title>sample</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="app">
<sample />
</div>
</body>
</html>
#JavaScriptビルド実行
コマンドラインで
cd sample
npm run dev
動作確認
http://localhost/laravelSample/sample/vue
実行結果
hello world