在Laravel软件包中注册Vue组件 [英] Registering vue components in Laravel package

问题描述

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

I have been trying very hard to register vue component in my own test package developed for laravel. I did even check laravel\horizon and some other packages but I can't figure out how to do it. I'm following Laravel Package Development

所以我的包裹在我的Laravel应用之外.我的包裹结构如下:

so my package is outside my Laravel app. And my package structure is like below:

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 \ compensents，但仍在app.js中进行了复制. 因此，问题是在Laravel软件包或供应商中注册vue组件的最佳方法是什么? Laravel Horizo​​n软件包如何注册其组件，我确实检查了Laravel/horizo​​n的所有代码源，没有诸如"npm run"之类的命令，也没有复制这些组件并将其添加到主应用程序中的某个地方，就像npm正在检查一样供应商文件，在laravel/horizo​​n中搜索package.json文件，然后注册组件.如果是这样，为什么我的Vue组件未注册.

For the vue component it's just the Laravel's example, and for the app.js too, basically didn't change anything because it's just for testing purpose. I tried to copy vue components to the resources\js\compnents with "vendor:publish" command it's copying it but still not registered in app.js. So the question is what is the best way of registering vue components in Laravel package or vendor? How Laravel Horizon package register it's components, I did check all the source of code of Laravel/horizon there's no command like "npm run" or copying the components and adding it in some place in the main app, it lloks like the npm is checking vendor files searching for package.json file in laravel/horizon and then register the componenets. if it's so why my vue compnents is not registered.

推荐答案

Laravel Horizo​​n Way:

因此，在阅读了Laravel Horizo​​n的全部代码之后，我可以了解下面的方式:

So after reading the entire code of Laravel Horizon I could understand there way which it's like below:

1-首先，您要注册诸如Laravel这样的vue组件，以在app.js中进行example-component的注册.因此您必须在resourses \ js中为Laravel软件包创建自己的app.js:

1- First thing you register your vue components like Laravel do for example-component in app.js. so you have to make your own app.js for your Laravel package inside resourses\js:

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

在包根目录中放置2秒钟的make webpack.mix.js文件，然后将您的app.js复制到public \ vendor \ packagename \中，如下所示:

2- second make webpack.mix.js file in the root of your package and copy your app.js into public\vendor\packagename\ like below:

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"，以在您程序包内的公共文件夹中编译您的app.js.

3- run "npm run dev" in your package to compile your app.js in public folder inside your package.

4-在您程序包的appserviceprovider.php中发布public \ app.js文件:

4- publish your public\app.js file in appserviceprovider.php of your package:

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

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

5- now in your resource view files you can add the app.js file like below:

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

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

6- make a command to publish the app.js file from your package public folder to laravel's public\vendor\package folder.

<?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存储库中找到.我只是在说明使人们更容易理解的方法.

All of the codes above can be found in Laravel Horizon Github repository. I'm just explaining the way to make it easier for people to understand.

这篇关于在Laravel软件包中注册Vue组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！