Laravelスパーク：Laravelスパークで

Question

新しい設定]タブとVueのコンポーネントの作成、ほとんどの設定パネルは、私は新しい設定パネルを作成していたカスタムタブ

<spark-create-tests :user="user" inline-template> 
    <div> 
    </div> 
</spark-create-tests> 

経由で呼び出され、対応のVue JSコンポーネントを持っています。コアラベルコードで使用されているパターンに従いたいと思っていますが、どのように/どこで私のビューコンポーネントを作成するのかはわかりません。それはコンパイルプロセスのいくつかの並べ替えによって作成されたファイルだつまり - 私は集めることができました何、公共対向Webアプリケーションは、このファイル

#File: public/js/app.js 
Vue.component('spark-create-team', { 
    mixins: [base] 
}); 

でそのコンポーネントをインスタンス化するから、これはその人の編集できないように見えます。私はそれがwebpackだと思っていますが、凍った洞窟の開発者として、私はよく分かりません。私のコンポーネントが

または含まれているように私のプロジェクトを再コンパイルする方法I

1. が
2. 私laravelスパークプロジェクトに新しいコンポーネント定義を追加します - 私の質問に私をもたらします

   、交互に、上記のことは信じられないほど間違ったものになっています。私は実際にこの他のことをする必要がありますか？

Answer 1

私はこの1つを自分で見つけたと思っています。ショートバージョンは、あなたがいずれかの

npm run dev 
npm run production 

ですべてのあなたの資産を構築したり、後からはPERF /確かツーのための通常のポーリングのトレードオフとポーリングバージョンである（以下のいずれかでNPM時計モードを使用することができますです仕事）

npm run watch 
npm run watch-poll  

高レベル - Laravelブランドのnpmベースの統合。 Laravel 5.3では、これらの統合はLaravel Elixerとして知られています。 Laravel 5.4では、これらの統合はLaravel Mixとして知られています。 （少なくとも4.0バージョンで）Laravelスパークの統合のための

ソースエントリポイントは、ザ・が文は、他のJavaScriptファイルに引っ張る必要

#File: resources/assets/js/app.js 
require('spark-bootstrap'); 

require('./components/bootstrap'); 

var app = new Vue({ 
    mixins: [require('spark')] 
}); 

（このすべては、あなたが使用している場合、ウェブパックでコンパイル/解決されていますnpm run）。例えば、

spark/resources/assets/js/spark-bootstrap.js 
./resources/assets/js/components/bootstrap.js 

いるのそれぞれにプル上記2つのrequireの文は、順番に、他のファイルの多くに引っ張ります。 PHP include/require o-rama - javascriptのために改革されました！

最終的に、必要とするグラフこれはspark-create-teamコンポーネントを定義するものであり、以下のファイル

#File: resources/assets/js/spark-components/settings/teams/create-team.js 
var base = require('settings/teams/create-team'); 

Vue.component('spark-create-team', { 
    mixins: [base] 
}); 

をロードします。基本メソッドはrequire('settings/teams/create-team')ファイルで定義されます。

#File: spark/resources/assets/js/settings/teams/create-team.js 
module.exports = { 
    /*...*/ 
} 

これらのことを考えると、コアラベルのスパークコードを妨げずに自分のコンポーネントを落とすことはできません。誰かがコメントで私に他のことを納得させない限り、私はresources/assets/js/app.jsファイルに私を落としていきます。

Answer 2

/resources/assets/js/components/で独自のコンポーネントを作成することもできます（さらに簡単な場合は/spark-componentsでも可能です）。コンポーネント定義（home.jsなど）または.vuesingle file components（HTML、CSS、およびJSにはExample.vueなど）がメッシュで結合されたJSファイルのいずれかです。いずれにせよ、あなたはとても似bootstrap.js内の各ファイルを登録する必要があります。もちろん

require('./home'); // home.js -> <home> 

または

Vue.component('example', require('./Example.vue')); // Example.vue -> <example> 

、あなたが/components下のサブディレクトリ内のファイルを含める場合、あなたは調整する必要があるだろうパス。 npm run devを実行すると、/resourcesのすべてのJSアセットは通常1つのファイル（app.js）にコンパイルされますが、webpack.min.jsファイル内でこの動作を制御できます。必要に応じてLaravel Docsがあなたに役立ちます。