Vue JS в качестве виджета на другом сайте - PullRequest
Новая
       9

Vue JS в качестве виджета на другом сайте

0 голосов
/ 04 мая 2018

Мне было интересно, возможно ли создать компонент vuejs, который можно было бы встроить в другой сайт. Дело в том, что компонент будет появляться на веб-сайте несколько раз, поэтому у меня не будет доступа к корневому элементу. Я знаю способ сделать это в реакции, но я бы предпочел сделать это в Vue.

Ответы [ 3 ]

0 голосов
/ 04 мая 2018

Да, это возможно.

Я создал этот проект очень давно https://github.com/lmarqs/odw-form. Целью было создание встраиваемых компонентов для других сайтов.

Он был создан с использованием vue-cli, но мне пришлось его адаптировать.

По сути, я создал новый файл записи для веб-пакета ( main.prod.js ). Эта запись устанавливает компоненты на Vue. Так что в html можно создать somenthing так: 

<div id="app-1">
  <my-component1></my-component1>
  <my-component2></my-component2>
</div>
<div id="app-2">
  <my-component1></my-component1>
  <my-component2></my-component2>
</div>
<script>
  var app1 = new Vue({
    el: "app-1"
  });

  var app2 = new Vue({
    el: "app-2"
  });
</script>

После создания новой записи я установил запись на webpack.base.conf.js 

module.exports = {
  entry: {
    main: isProduction ? ["./src/main.prod.js"] : ["./src/main.js"]
  }
}

Затем, запустив команду npm run build, встраиваемые файлы css и js создаются в папке /dist.

0 голосов
/ 04 мая 2018

Я знаю, что я не отвечаю на ваш вопрос так, как вы хотите (используя компонент vue на другом сайте).

Было бы идеально, если бы вы создали компонент и использовали его в таких средах, как Angular, React, Vue и т. Д. Вы можете сделать это с помощью Stencil.js

Нажав здесь , вы увидите ошеломительный учебник об этом.

0 голосов
/ 04 мая 2018

Вы можете разместить более одного корневого элемента на одном сайте. Каждый компонент должен отображаться под корнем. Кроме того, у вас всегда есть доступ к корню через свойство $root. Какой у вас вопрос?

...