在 Laravel 包中注册 vue 组件

Question

我一直在努力在我自己为 Laravel 开发的测试包中注册 vue 组件。我什至检查了 laravel\horizo​​n 和其他一些软件包，但我不知道该怎么做。我正在关注Laravel 包开发

所以我的包在我的 Laravel 应用程序之外。我的包结构如下：

vendor
    packagename
        resources
            js
                components
                    examplecomponent.vue
                app.js
        AppServiceProvide.php
        package.json
        webpack.mix.js

对于 vue 组件来说，这只是 Laravel 的示例，对于 app.js 来说，基本上没有改变任何东西，因为它只是用于测试目的。我尝试使用“vendor:publish”命令将 vue 组件复制到 resources\js\compnents，它正在复制它，但仍未在 app.js 中注册。所以问题是在 Laravel 包或供应商中注册 vue 组件的最佳方式是什么？Laravel Horizo​​n 包如何注册它的组件，我确实检查了 Laravel/horizo​​n 的所有代码源，没有像“npm run”这样的命令或复制组件并将其添加到主应用程序中的某个位置，就像 npm 正在检查一样供应商文件在 laravel/horizo​​n 中搜索 package.json 文件，然后注册组件。如果是这样，为什么我的 vue 组件没有注册。

Answer 1

Laravel Horizo​​n 方式：

因此，在阅读了 Laravel Horizo​​n 的完整代码后，我可以理解如下所示的方式：

1- 首先，像 Laravel 一样在 app.js 中注册 vue 组件，例如 example-component。所以你必须在 resources\js 中为 Laravel 包制作你自己的 app.js：

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

2-第二次在包的根目录中创建 webpack.mix.js 文件，并将 app.js 复制到 public\vendor\packagename\ 中，如下所示：

mix
  .options({
    terser: {
      terserOptions: {
        compress: {
          drop_console: true
        }
      }
    }
  })
  .setPublicPath("public")
  .js("resources/js/app.js", "public")
  .version()
  .webpackConfig({
    resolve: {
      symlinks: false,
      alias: {
        "@": path.resolve(__dirname, "resources/js/")
      }
    },
    plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
  });

3-在包中运行“npm run dev”以在包内的 public 文件夹中编译 app.js。

4- 在包的 appserviceprovider.php 中发布 public\app.js 文件：

$this->publishes([
                __DIR__.'/../resources/views' => resource_path('views/vendor/xoadmin'),
            ], 'views');

5-现在在资源视图文件中，您可以添加 app.js 文件，如下所示：

<script src="{{asset(mix('app.js', 'vendor/packagename'))}}"></script>

6-发出命令将 app.js 文件从包公共文件夹发布到 laravel 的 public\vendor\package 文件夹。

<?php

namespace Vendor\PackageName\Console;

use Illuminate\Console\Command;

class AssetsCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'packagename:assets';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Re-publish the packagename assets';

    /**
     * Execute the console command.
     *
     * @return void
     */
    public function handle()
    {
        $this->call('vendor:publish', [
            '--tag' => 'packagename-assets',
            '--force' => true,
        ]);

        $this->call('vendor:publish', [
            '--tag' => 'views',
            '--force' => true,
        ]);
    }
}

上述所有代码都可以在Laravel Horizo​​n Github 存储库中找到。我只是解释一下方法，让人们更容易理解。