По крайней мере, необходимы базовые знания Laravel разработка пакетов. Этот пост о том, как предоставить пользователям полный контроль над настройкой vuejs-части вашего пакета Laravel. Позволь мне объяснить.

Соревнование

Поскольку невозможно принимать полные дизайнерские решения для всех, кто будет использовать ваш пакет, лучше создавать так, чтобы пользователи могли адаптировать дизайн, который вы сделали, в соответствии с их потребностями. Laravel предоставляет эту функцию, позволяя пакетам публиковать свои активы. Сюда входят представление, активы, конфигурация, база данных. и т.д. Таким образом, пользователь может иметь доступ для внесения изменений по мере необходимости.

Вы также можете опубликовать файлы vue. Публикация файлов vue - шаг в правильном направлении, но что дальше? А как насчет модулей, требуемых пакетом, и их компиляции? В этом посте я делюсь своим рабочим решением.

Предположим, у нас есть пакет со структурой папок ниже:

your-name/
    package-name/
        config/
        database/
        public/
        resources
            assets
                components
                    example-component1.vue
                    example-component2.vue
                app.js
                admin.js
        web.php
        src
            ...
            PackageServiceProvider.php
            ...
        tests/
        composer.json

Наши файлы vuejs можно опубликовать в resources/assets/vendor/package-name нашего приложения, выполнив команду публикации ниже:

php artisan vendor:publish --provider="YourName\PackageName\PackageServiceProvider" --tag="vue-components"

Это возможно из-за этих строк в нашем PackageServiceProvider.php файле

$this->publishes([
    __DIR__ . '/../resources/assets' =>
    resource_path('assets/vendor/package-name'
)], 'vue-components');

Приведенный выше фрагмент кода копирует все из нашей папки пакета resources/assets в наши приложения resources/assets/vendor/package-name. Что дальше? Давайте посмотрим на содержимое app.js файла нашего пакета, он может помочь нам решить, что делать дальше.

//package-name app.js 
import VueSweetAlert from 'vue-sweetalert';
Vue.use(VueSweetAlert);
Vue.component('example-component1', require('./components/example-component1.vue'));
Vue.component('example-component2', require('./components/example-component2.vue'));

window.packageNameEvent = new Vue();

В приведенном выше app.js мы импортируем все необходимые нам модули, это только один, то есть плагин vue-sweetalert, регистрируем наши компоненты vue (example-component1 и example-component2), а также у нас есть шина событий для нашего пакета. Но это все еще бесполезно в нашем приложении, если оно не скомпилировано.

Компиляция

Это первое, что нам нужно сделать, скомпилировать его. В Laravel есть именно то, что нам нужно - Laravel-mix. Laravel mix поможет нам скомпилировать все, что есть в app.js файле нашего приложения, во что-то, что можно использовать в браузере. Итак, чтобы скомпилировать ресурсы vue нашего пакета, все, что нам нужно сделать, это потребовать app.js нашего пакета в app.js файле нашего приложения и запуститьnpm run dev

//application's app.js
require(‘./../vendor/package-name/app’)

Зависимости

Компиляция актива, которую мы попытались выполнить выше, будет прекращена, поскольку он не сможет найти плагин vue sweealert, это зависимость, необходимая для работы нашего пакета. Давайте исправим это. Решение - установить плагин vue-sweetalert. Очевидно, что мы импортируем только один плагин, ваш собственный пакет может использовать столько модулей, сколько требуется. Просто установите все модули npm, которые требуются вашему пакету, в ваше приложение. И теперь наша компиляция должна работать, и пользователи наших пакетов имеют полный доступ ко всем нашим файлам vue для внесения изменений, то есть, если какой-либо из используемых нами плагинов не работает, его можно заменить на что-то другое.

Раздел администратора

Возможно, в вашем пакете есть раздел администратора, в котором используются другие или дополнительные модули, и у вас даже есть некоторые методы, специфичные для администратора. По этой причине вы решили отделить интерфейсную часть от внутренних ресурсов. Что ж, с этой конфигурацией не все так просто, как требование admin.js в app.js файле вашего приложения. В нашем вымышленном пакете есть admin.js файл. Приведенный ниже фрагмент - это его содержание.

//admin.js 
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found');
}
import VueSweetAlert from 'vue-sweetalert';
window.Vue = require('vue');
Vue.use(VueSweetAlert);
Vue.prototype.$http = axios;
Vue.component('component-one', require('./components/component-one.vue'));
Vue.component('component-two', require('./components/component-two.vue'));
const app = new Vue({
    el: '#app',
    data () {
        return {
            
        }
    }
    methods: {
    }
})

Здесь мы сделаем ссылку на него прямо в webpack.mix.js файле нашего приложения. Для admin.js из нашего вымышленного пакета это будет означать обновление файла webpack.mix.js нашего приложения следующим образом:

//webpack.mix.js
mix.js('resources/assets/vendor/pakage-name/admin.js',
    'public/vendor/package-name/js')

И, конечно же, вы должны указать на него ссылку в файлах лезвия вашего пакета.

<script src=”{{ asset(‘vendor/package-name/js/admin.js’) }}”></script>

Это последний шаг. Поскольку представления доступны для публикации, ваш пользователь также имеет здесь контроль и, следовательно, может решить изменить ситуацию.

Спасибо, что прочитали это. Надеюсь, вы найдете это полезным.