Можно ли сделать распространяемый виджет Vue с компонентами одного файла? - PullRequest
Новая
       59

Можно ли сделать распространяемый виджет Vue с компонентами одного файла?

0 голосов
/ 27 августа 2018

Это может быть немного странный вопрос, но я постараюсь объяснить.

Я собираюсь создать виджет для видеоплеера на основе vue для клиентского веб-сайта Drupal. Идея состоит в том, чтобы создать что-то, что он может просто вставить, например плагин JQuery. Тем не менее, мне бы очень хотелось использовать отдельные файловые компоненты Vue (с Webpack), чтобы я мог хранить все все вместе.

Моей первой мыслью было бы использовать Vue CLI, npm build, а затем добраться до папки dist / и извлечь следующее: 

<link href=/static/css/app.cf6f127cf50f4c0b2424d30fdc56c3a4.css rel=stylesheet>

<div id="my-widget"></div>

<script type=text/javascript src=/static/js/manifest.e12c1c4a9566f686d69f.js></script>
<script type=text/javascript src=/static/js/vendor.47037dd92c40b3f38949.js></script>
<script type=text/javascript src=/static/js/app.3f1bab5cc5b1be1127b2.js></script>

Хотя это и не так, есть ли лучший способ добиться этого? Имейте в виду, что его веб-сайт НЕ является приложением Vue, но я хочу, чтобы этот виджет создавался КАК приложение Vue.

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Спасибо @ yuriy636 за ответ на мой вопрос. CLI 3.0 позволяет создавать в виде библиотеки или веб-компонента. * Docs 1002 *

Также я нашел следующую статью, которая углубляется

https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/

0 голосов
/ 27 августа 2018

Я не знаю, понимаю ли я на 100 процентов, насколько я знаю, это возможно. Неважно, как вы связываете свое приложение. Это вопрос архитектуры. Вы можете использовать vue.js частично, как виджет.

Сначала, когда вы устанавливаете экземпляр Vue, просто установите элемент с вашим целевым элементом. 

new Vue({
    el: '#my-widget'
});

Если вы хотите, чтобы ваш клиент сам установил элемент, сделайте несколько функций для создания vue widget. (с учетом множественного экземпляра vue или совместного использования состояния, бла-бла ...) 

// you can provide simple function like this (I'm sure it needs to be more.)
const Widget = {
    createWidget(el) {
        new Vue({
            el: el
        });
    }
};

// on client side
Widget.createWidget('#his-widget');

При связывании, если вы хотите, чтобы ваш виджет был связан с веб-сайтом клиента Drupal. Пусть он импортирует ваш виджет, как и другие библиотеки. Вы можете создать свой виджет с помощью npm run build в vue-cli и затем передать его ему, чтобы он мог включить его.

...