如何在 laravel 内组织 vueify？

Question

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

基本上，我想直接在包含我的 Vue 实例的 blade 模板中使用这些组件。但是因为我需要编译那个 *.vue 文件，所以我不能在我的模板中直接引用它们。有了这个，我的意思是做这样的事情：

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

我的 blade 模板不工作。

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

创建一个文件

如何组织这个？

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，我的所有组件都在其中注册而没有冲突。在我的 blade 文件中，我只是在 HTML 中使用它们，而没有明确导入任何内容。

顺便说一句：这就是 Laravel 5.3 的方向。我终于弄明白了，如何 "pre-compile" 我所有的 vuejs 组件没有任何冲突。

如何在 laravel 内组织 vueify？

How to organize vueify within laravel?

ecma

laravel

browserify

vue.js

laravel-elixir