0

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');
...

私が何を意味するか知っていることを願っています。すべてのコンポーネントを 1 つの app.js ファイルにまとめるのが怖かったので、そのようにしました。ここに行く方法についての情報は見つかりませんでした。

基本的に、すべての *.js ファイルを削除したいと考えています。これは、コンポーネントをコンパイルする方法にすぎないためです。または、少なくとも「ページ」ごとに 1 つのファイルを作成したくありません。

これを整理する方法は？

4

2 に答える 2

0

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

私は今、次のような app.js を持っています:

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

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

または、npm を使用している場合:

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

さらに、そのファイルに vuejs フィルターとディレクティブを登録します

そして最後に私のgulpfile：

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 で使用しています。

ところで: これは Laravel 5.3 が目指している方法です。そこで、競合することなくすべてのvuejsコンポーネントを「プリコンパイル」する方法を最終的に理解しました。

于 2016-11-16T17:13:43.983 に答える
0

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

于 2016-08-13T09:45:26.800 に答える