Question

我想在我的Laravel项目中使用Vueify。我使用Vueify（* .vue文件）有不同的Vuejs组件。我的问题是如何最好地组织所需的文件，并优化发送到浏览器的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

如何将它们全部捆绑到一个dist文件中，只需使用Laravel视图中所需的Vue.js组件？

Answer 2

最后我找到了我正在寻找的解决方案。如前所述，我可以将它们捆绑在一个文件中，但我无法弄清楚如何完全这样做。

我现在有一个看起来像这样的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中使用它们而不明确地导入任何内容。

BTW：这是Laravel 5.3的用途。我终于明白了，如何预编译＆＃34;我所有的vuejs组件没有任何冲突。

如何在laravel中组织vueify？

2 个答案: