0

我想在我的 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 文件，因为它们只是我编译组件的方式。或者，至少我不想为每个“页面”创建一个文件。

如何组织这个？

4

2 回答 2

0

将它们全部捆绑到一个 dist 文件中，然后在 Laravel 视图中使用您需要的 Vue.js 组件怎么样？

于 2016-08-13T09:45:26.800 回答
0

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

我现在有一个 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 回答