Vue js как виджет на другом сайте
Мне было интересно, можно ли создать компонент vuejs, который можно было бы встроить в другой сайт. Дело в том, что компонент будет появляться на веб-сайте несколько раз, поэтому у меня не будет доступа к корневому элементу. Я знаю способ сделать это с помощью реакции, но я бы предпочел сделать это во Vue.
Ответы 4
Вы можете разместить более одного корневого элемента на одном сайте. Каждый компонент должен быть отрисован под корнем. Кроме того, у вас всегда есть доступ к корню через свойство $root. Какой у Вас вопрос?
Да, это возможно.
Я создал этот проект очень давно https://github.com/lmarqs/odw-form. Задача заключалась в создании встраиваемых компонентов для использования на других сайтах.
Он был создан с использованием vue-cli, но мне пришлось его адаптировать.
По сути, я создал новый файл входа в веб-пакет (main.prod.js). Эта запись устанавливает компоненты на Vue. Таким образом, в html можно создать следующее:
<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, в папку /dist будут созданы встраиваемые файлы css и js.
Я мог бы использовать var app1 = new Vue({ el: "app1" });, var app2 = new Vue({ el: "app2" });, и у вас были бы разные экземпляры одного и того же компонента.
Могут ли эти несколько экземпляров повлиять на производительность?
У меня никогда не было проблем с производительностью. При запуске npm run build шаблоны переносятся в функции рендеринга (та же концепция, что и в реакции). Эти функции рендеринга действительно легкие.
Знаю, я не отвечаю на ваш вопрос так, как вы хотите (используя компонент vue на другом сайте).
It would be perfect if you create a component and use it in frameworks like Angular,React,Vue etc.You can do it with Stencil.js
Нажав здесь вы видите отличный учебник по этому поводу.
Выглядит потрясающе! Спасибо!
Да, я знаю, я обновил свой ответ, чтобы вы могли увидеть отличный учебник, сделанный академией.
Возможно стоит посмотреть в сторону vue-custom-element
Что, если бы я хотел иметь несколько экземпляров, в которых каждый
<div id = "app" query = "foo"> <my-component></mycomponent> </div> <div id = "app" query = "bar"> <my-component></mycomponent> </div>