如何在laravel中组织vueify？

Question

我想在我的Laravel项目中使用Vueify。我有不同的Vuejs组件使用Vueify (*.vue文件)。我的问题是如何最好地组织所需的文件，并优化发送到浏览器的JS代码。

基本上，我想直接在我的刀片模板中使用这些组件，其中包括我的Vue实例。但是由于我需要编译那个*.vue文件，所以我不能在模板中直接引用它们。有了这个，我是说做这样的事：

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

我的刀片模板不起作用了。

因此，我为每个刀片模板创建了一个专用的JS文件，其中存储了包含组件的Vue对象。这感觉不太对劲。例如，它使我的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文件，因为它们只是我编译组件的方式。或者，至少我不想在每个“页面”创建一个文件。

怎么组织这个？

Answer 1

最后，我找到了我正在寻找的解决方案。如前所述，我可以将它们捆绑在一个文件中，但我不知道如何做到这一点。

我现在有一个app.js，如下所示：

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

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

或者，在使用国家预防机制时：

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

此外，我在该文件中注册vuejs过滤器和指令。

最后是我的口香糖：

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
        }
    })

这导致了应用程序编译的. to，其中我的所有组件都被注册了，并且没有冲突。在我的刀片文件中，我只是在HTML中使用它们，而没有显式地导入任何内容。

顺便说一句，拉拉维尔5.3就是这么做的。在这里，我终于想出了如何“预编译”我所有的vuejs组件，没有任何冲突。

Answer 2

把它们都打包到一个dist文件中，然后在Laravel视图中使用您需要的Vue.js组件，怎么样？