Как построить проект Vue.js, чтобы использовать его в WordPress

Question

Обновление: см. Редактирование в конце

Продолжение моего предыдущего вопроса здесь: Включение компонента Vue.js в плагин Wordpress без CDN

Весьма подходящий ответот окба вызывает у меня головные боли.Как создать что-то с помощью Vue.js, которое я могу использовать в WordPress?

Я работаю с Vue-cli.Я попытался построить свой проект как библиотеку, используя эту командную строку:

vue-cli-service build --target lib --name myVueLibrary ./src/main.js

, а затем импортировать dist/* файлы в WordPress:

wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('myVueLibrary', './vue-plugin/myVueLibrary.common.js', [], '0.1.0');

, где my-plugin.js выглядитвот это (я использую шорткоды для замены контента <div> тем, что мой плагин помещает туда):

var elements = document.querySelectorAll('[my-plugin-atts]');

elements.forEach(function (element) {
    var atts = JSON.parse(element.getAttribute('my-plugin-atts'));
    var vm = new Vue({
        el: element,
        created: function () {
            this.atts = atts;
        },
        template: '<div class="plugin-container">{{atts.id}}</div>'
    });
});

И я получаю следующую ошибку:

Uncaught ReferenceError: Vue is not defined

Но!Если я заменю свой vueBaoViz.common.js импорт на импорт Vue CDN, мой плагин WordPress отображает то, что я хочу, чтобы он отображался.

wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('vue', 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js', [], '2.5.16');

Я думаю, что моя сборка Vue не в порядке, как мне построить что-то, что яможно использовать таким образом, и это упаковывает Vue.js в себя?

Answer 1

Итак, оказывается, я идиот, я забыл добавить plugin_dir_url(__FILE__) перед путем при загрузке локального файла.Это решило мою проблему.

Answer 2

1 - Вы можете использовать vue js - non spa, из cdn или с веб-пакетом, посмотрите https://vuejs.org/v2/guide/#Composing-with-Components, чтобы узнать, как вы будете использовать vue js в обычных js-файлах.

2 - Вы можете использовать vue-cli как стандартный спа-проект с wordpress rest api: https://developer.wordpress.org/rest-api/