Laravel 5.3でVue.jsを使用する
Laravel 5.3以前のプロジェクトでは、次のようなスクリプトタグを使用してVue.jsを使用しました。
<script type="text/javascript" src="../js/vue.js"></script>
次に、このページに固有のVueインスタンスを次のように作成します。
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
そして、それをHTMLの関連するdiv＃idにバインドします。
今、Laravel 5.3 Vue.jsがバンドルされており、gulp/elixirを使用することでドキュメントで説明されているコンポーネントを使用できることを完全に認識していますが、私の質問はif先ほど述べたように、Vue.jsインスタンスを作成したい、つまり、特定のページ（コンポーネントではない）に対してVue.jsインスタンスを厳密に作成する場合、どうすればよいですか？
スクリプトタグでvue.jsライブラリをインポートすることで、以前のように設定しますか、または生成されたapp.jsを使用できますか？
このようにする必要はありませんが、すべてのコンポーネントを作成する必要がありますか？
私にとっては、一度だけ使用するもののコンポーネントを作成することは意味がありません-コンポーネントの目的は再利用可能だと思いました-あなたはそれを複数の場所で使用できます。 Vue.jsドキュメントで言及されているように：
コンポーネントは、Vue.jsの最も強力な機能の1つです。基本的なHTML要素を拡張して、再利用可能なコードをカプセル化するのに役立ちます。
アドバイスをいただければ幸いです！
Laravelそのまま、Webpackを使用します。これにより、適切なWebpack構成を追加できます。プラスgulp watchは、Homestead vagrant VM内で動作します。これは、Webpackを使用してファイルの変更を監視するためです。非同期コンポーネントもチェックアウトします。
次に、個別のVueページごとのインスタンス... app.jsから始めましょう...
App.js
最初にLaravel 5.3をインストールすると、app.js エントリーポイント。メインのVueインスタンスをコメントアウトしましょう：
resources/assets/js/app.js
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* 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'));
// Let's comment this out, each page will be its own main Vue instance.
//
// const app = new Vue({
// el: '#app'
// });
app.jsファイルは依然としてグローバルなものの場所であるため、ここに追加されたコンポーネント（上記のexampleコンポーネントなど）は、それを含むすべてのページスクリプトで使用できます。
ようこそページスクリプト
次に、ようこそページを表すスクリプトを作成しましょう。
resources/assets/js/pages/welcome.js
require('../app')
import Greeting from '../components/Greeting.vue'
var app = new Vue({
name: 'App',
el: '#app',
components: { Greeting },
data: {
test: 'This is from the welcome page component'
}
})
ブログページスクリプト
次に、ブログページを表す別のスクリプトを作成しましょう。
resources/assets/js/pages/blog.js
require('../app')
import Greeting from '../components/Greeting.vue'
var app = new Vue({
name: 'App',
el: '#app',
components: { Greeting },
data: {
test: 'This is from the blog page component'
}
})
挨拶コンポーネント
resources/assets/js/components/Greeting.vue
<template>
<div class="greeting">
{{ message }}
</div>
</template>
<script>
export default {
name: 'Greeting',
data: () => {
return {
message: 'This is greeting component'
}
}
}
</script>
Welcome Blade View
Laravelに同梱されているウェルカムブレードビューを更新しましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="app">
<example></example>
@{{ pageMessage }}
<greeting></greeting>
</div>
<script src="/js/welcome.js"></script>
</body>
</html>
アイデアはブログビューでも同じです。
エリキシル
ElixirのWebpack構成オプションを独自のオプションとマージする機能を使用して、gulpファイルにまとめます（詳細については here ）。
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
var config = elixir.webpack.mergeConfig({
entry: {
welcome: './resources/assets/js/pages/welcome.js',
blog: './resources/assets/js/pages/blog.js'
},
output: {
filename: '[name].js' // Template based on keys in entry above
}
});
mix.sass('app.scss')
.webpack('app.js', null, null, null, config);
});
gulpまたはgulp watchと両方が表示されますwelcome.jsおよびblog.js公開済み。
思考
「ウェブアプリ」に関しては、現在SPAルートを利用しており、Laravel=をバックエンドAPI（または他の言語/フレームワーク）として使用しています。 Vue SPAはLaravelに組み込まれていますが、バックエンドから独立した完全に独立したレポ/プロジェクトである必要があると思います。SPAにはLaravel/PHPテンプレートビューはありません。ところで、SPAには個別にビルドします。SPAには「ページ」コンポーネントがあります（通常はVueRouterによって呼び出され、もちろん、より多くのネストされたコンポーネントで構成されます。以下のプロジェクト例のリンクを参照してください）。
ただし、「Webサイト」の場合、Laravelはブレードビューを表示するのに適した選択肢であり、そのためにSPAを使用する必要はありません。この回答で説明したことを実行できます。また、ウェブサイトをウェブアプリに接続できます。ウェブサイトには、ユーザーをウェブサイトからウェブアプリSPAにログインさせる「ログイン」リンクがあります。ウェブサイトはSEOフレンドリーのままです（ただし、 Googleは、SPA javascriptサイトでもコンテンツを見ています）。
SPAアプローチを見るために、Vue 2.0ここに例を示しました： https://github.com/prograhammer/example-vue-project =（うまく動作しますが、まだ進行中です）。
編集：
Commons Chunk Plugin もチェックアウトすることをお勧めします。このようにして、ブラウザはいくつかの共有モジュールの依存関係を個別にキャッシュできます。 Webpackは、インポートされた共有依存関係を自動的に引き出し、それらを別のファイルに配置できます。両方のcommon.js（共有のもの）とwelcome.jsページ。その後、別のページに再びcommon.jsおよびblog.jsとブラウザはキャッシュされたcommon.js。
vuejsをapp.jsに組み込みたい場合gulpを使用してエリクサーでそれを行うことができます：
まず、laravel-elixir-browserify-officialが必要です npmから：
npm install laravel-elixir-browserify-official
次に、以下をpackage.jsonに配置します。
"browserify": {
"transform": [
"vueify",
"babelify"
]
}
resources/assets/js/app.jsファイルには、次のものが必要です。
require('./bootstrap');
bootstrap.jsファイルは、「resources/assets/js」フォルダーにある必要があります。これが私のアプリケーションにパスポートと共にインストールされたかどうか覚えていないので、もし持っていなければlaravelは "bootstrap.js"に以下のコードを提供しました：
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
/**
* Vue is a modern JavaScript library for building interactive web interfaces
* using reactive data binding and reusable components. Vue's API is clean
* and simple, leaving you to focus on building your next great project.
*/
window.Vue = require('vue');
require('vue-resource');
/**
* We'll register a HTTP interceptor to attach the "CSRF" header to each of
* the outgoing requests issued by this application. The CSRF middleware
* included with Laravel will automatically verify the header's value.
*/
Vue.http.interceptors.Push((request, next) => {
request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
next();
});
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from "laravel-echo"
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: 'your-pusher-key'
// });
これでgulpfile.jsでを使用できます：
elixir(function(mix) {
mix.browserify('app.js');
});
そして、あなたのHTMLには次のものがあります：
...
<div id="app">
@{{message}}
</div>
...
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
gulpを実行してください
elixirを使用していない場合は、browserifyまたはwebpackパッケージのnpmで同様のことができるはずです。
編集
更新された質問に答えるために、もちろん1ページにvue.jsを使用できます。私は個人的にこのものにノックアウトを使用しています（vue laravelパスポートが使用しているため）を使用していますが、アーキテクチャ的には同じです-MVVMライブラリです。
MVVMのポイントは、ビューを基礎となるデータモデルにバインドすることです。そのため、一方が更新されると他方が自動的に更新されます（つまり、dom内の更新はモデルを自動的に更新し、その逆も同様です）。 Vueコンポーネントはコードブロックを再利用する簡単な方法です。これはウィジェットや複雑なコンポーネントの作成に非常に適していますが、ビューモデルからページにデータをレンダリングするだけの場合は、通常、そのためのコンポーネントを作成する必要はありません。
App.jsの生成に関しては、これはプロジェクトに完全に依存しています。 1つのビューに複数のビューモデルをバインドすることはできないため、プロジェクトで複数のビューモデルを使用する予定がある場合は、ページに特定のビューモデルを含める方法を見つける必要があります。これを実現するには、おそらくapp.jsからビューモデルを削除し、bootstrap=とそこに登録されたコンポーネントを保持してから、各ページに含める必要がある個別のビューモデルを作成します。
Laravel 5.5以降を使用している場合、Bladeのパワーを利用したいが、VueJSのリアクティブを楽しみたい場合は、ここが最適なソリューションです