laravel内でvueifyを構成する方法は？

Question

LaravelプロジェクトでVueifyを使いたいです。私はVueify（* .vueファイル）を使って異なるVuejsコンポーネントを持っています。私の質問は、必要なファイルをどのように整理し、ブラウザに送られるJSコードを最適化するかについてです。

基本的には、私のVueインスタンスを含むブレードテンプレートでこのようなコンポーネントを直接使用したいと思います。しかし、* .vueファイルをコンパイルする必要があるので、テンプレートで直接参照することはできません。そのことを、私のようなものをやって意味：私のブレードテンプレート内

import Timeline from "./components/Timeline.vue";

が機能していません。

こうして、コンポーネントを含むVueオブジェクトを格納するブレードテンプレートごとに専用のJSファイルを作成しました。これは正しいとは思わない。たとえば、私のgulpファイルは次のようになります。

mix.browserify('models.js', 'public/js/compiled-models.js'); 
mix.browserify('campaigns.js', 'public/js/compiled-campaigns.js'); 
mix.browserify('campaigns_edit.js', 'public/js/compiled-campaigns_edit.js'); 
mix.browserify('product.js', 'public/js/compiled-product.js'); 
... 

私はあなたが私の言いたいことを願っています。すべてのコンポーネントを単一のapp.jsファイルにまとめることが怖かったので、私はそれを好きでした。私はここに行く方法が何であるかについての情報は見つけられませんでした。

基本的には、すべての* .jsファイルを取り除くことが大好きです。なぜなら、コンポーネントをコンパイルするための方法なのですから。または、少なくとも私は "ページ"ごとに1つのファイルを作成したくありません。

これを整理する方法は？

Answer 1

最後に、私が探していた解決策が見つかりました。すでに述べたように、それらを1つのファイルにまとめることができますが、正確に行う方法を理解できませんでした。

私は今、このように見えるapp.jsあります

をさらに

import vSelect from "vue-select" 
Vue.component('v-select', vSelect); 

、私はそのファイルにvuejsフィルタとディレクティブを登録します。

window.Vue = require('vue'); 
require('vue-resource'); 

Vue.component('Repository', require('./product_images/Repository.vue')); 

をか、NPMを使用しながら、そして最後に私のガルプファイル：

elixir(function (mix) { 
    mix.webpack('app.js', { 
     outputDir: "public/js", 
     output: { 
      filename: "compiled-[name].js" 
     }, 
     module: { 
      loaders: [{ 
       test: /\.vue$/, 
       loader: 'vue' 
      }, { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015'] 
       } 
      }] 
     }, 
     watchOptions: { 
      poll: true 
     } 
    }) 

これは、すべてのコンポーネントが矛盾なく登録されているapp-compiled.jsにつながります。私のブレードファイルでは、明示的に何もインポートすることなく、単にHTMLで使用します。

BTW：これはLaravel 5.3の今後の展開です。そこで私は最終的にどのように競合することなくすべてのvuejコンポーネントを「あらかじめコンパイルする」方法を見つけました。

Answer 2

これらをすべて1つのdistファイルにまとめて、Laravelビューで必要なVue.jsコンポーネントを使用するのはどうですか？