在Blade模板（Laravel）中本地注册Vue组件的最佳实践

Question

我正在用Laravel + Vue构建一个MPA项目，我目前在全球注册所有组件，所以我的app.js看起来像这样：

Vue.component(...)
Vue.component(...)
...
new Vue({
  el: '#app'
});

我想如果我们只注册一些全局组件然后为特定的刀片视图注册本地组件可能会更好。

假设在js / components文件夹中我有一个全局文件夹包含所有全局组件，auth / login文件夹包含登录页面的所有组件。

对于登录刀片视图：

@extends(layouts.app)
@section('content')
   <div id="login-page">
   </div>
@endsection

为这个特定的刀片视图构建文件/注册Vue组件的最佳做法是什么？

指针将不胜感激。

Answer 1

大多数时候我会在功能基础上安排我的组件。 js / components中每个功能一个文件夹（如果视图很复杂，则为子文件夹）。然后我有一个components-loader.js文件，我跟踪所有的全局组件。 components-loader.js只包含根组件和在vue中导入的partial，基本上创建了一个链。

在components-loader.js文件中，我以Webpack可以使用分块的方式加载组件，因此每个组件都有自己的chunk-x.js文件。并且只需要app.js中的加载器，这样app.js可以小得多。

components-loader.js:
Vue.component('example-component', function (resolve) {
  require(['./exampleFunctionality/exampleComponent'], resolve);
});

app.js:
require("./components/components-loader");

创建文件夹/ p​​ublic / chunk，并在最后放入webpack.mix.js：

.webpackConfig({
    output: {
        chunkFilename: `chunks/[name]${mix.config.inProduction ? '[chunkhash].chunk.js' : '.chunk.js'}`,
        publicPath: '/',
    },
});

现在，如果运行npm run dev / prod，组件的一个文件夹将是一个块，webpack仅在使用时将文件拉到浏览器。它有一个小延迟，但在我看来值得。

然后在您的刀片视图中使用根组件。

@extends(layouts.app)
@section('content')
   <example-component :prop1="asdasd" :prop2="basdasd"></example-component>
@endsection

这可能不是最好的方式，但对我来说效果很好。