Импорт пакета компонентов Vue в html для многостраничного приложения - PullRequest
Новая
       47

Импорт пакета компонентов Vue в html для многостраничного приложения

0 голосов
/ 21 июня 2020

Я пытаюсь использовать Vue в многостраничном приложении с серверной структурой (java + grails), которая производит html во время выполнения и должна отображать Vue компонент в качестве фактического пользовательского интерфейса.

Я перехожу к подходу, который использует веб-пакет для объединения каждого компонента Vue в качестве независимого пользовательского представления (на самом деле пакета js), который будет автоматически вводиться в каждый произведено html.

Итак, я выполнил следующие шаги для первой страницы приложения:

  1. Создано home.vue, простая страница hello world

  2. Запустил веб-пакет, используя home.vue в качестве точки входа, и поместил полученный пакет home.bundle.js в мой javascript путь к ресурсам. (в будущем я буду создавать несколько Vue компонентов и соответствующие пакеты - по одному для каждой страницы приложения. Я уже понял, как с этим справиться с помощью webpack)

  3. Запустите серверное приложение, которое генерирует мой html на лету. html включает home.bundle.js в элемент сценария и имеет элемент div с идентификатором, который должен быть связан с компонентом Vue, ранее связанным. Наконец, встроенный скрипт должен отвечать за создание экземпляра Vue и рендеринг компонента Vue в DOM в качестве фактического пользовательского интерфейса: 

<div id="vueApp"></div>
        
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="assets/home.bundle.js"></script>
        
<script>
      //Home = ???
      new Vue({
           el: '#vueApp',
           render: h => h(Home)
      })
</script>

Проблема заключается в выше закомментированная строка: Я не могу найти правильный способ получить объект Home из пакета. В документах и ​​примерах Vue это можно сделать, импортировав Home из модуля. vue до того, как webpack объединит все вместе - ведьма не подходит для моего подхода.

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

...