在刀片模板（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中的每个功能一个文件夹（如果视图复杂，还包括子文件夹）。然后我有一个组件加载器。js文件，用于跟踪所有全局组件。组件加载程序。js只包含vue中导入的根组件和部分，基本上创建了一个链。

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

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

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

创建文件夹 /public/chunkswebpack.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

这可能不是最好的方法，但它对我很有效。