时间戳

首页 > 解决方案 > Blade模板中本地注册Vue组件的最佳实践（Laravel）

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

问题描述

我正在使用 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 组件的最佳实践是什么？

指针将不胜感激。

标签： phplaravelvue.js

解决方案

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

在 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");

创建文件夹 /public/chunks 并将 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

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

推荐阅读