Создание микро-интерфейсов с компилированным инкапсулированным Vue. js + Vuetify. js Компоненты - PullRequest
Новая
       42

Создание микро-интерфейсов с компилированным инкапсулированным Vue. js + Vuetify. js Компоненты

1 голос
/ 25 февраля 2020

Мы разрабатываем микро-интерфейс, используя Vue. js + Vuetify. js для создания нашего веб-клиента. Вся распределенная система состоит из множества микросервисов, которые выполняют определенную задачу и производят некоторые данные. Основная идея заключается в том, что каждый сервис также предоставляет инкапсулированный скомпилированный Vue компонент (фрагмент), который отображает данные микросервиса и может быть выбран и предоставлен клиентом по требованию во время выполнения. Таким образом, каждая служба имеет следующую структуру: 

- ui
- fragments
- service specific source code

ui просто содержит приложение Vue + Vuetify, созданное с помощью vue/cli. Этот фрагмент представляет собой обычный Vue компонент, подобный следующему: 

<template>
  <v-menu
          ...
        >
          <template v-slot:activator="{ on }">
            <v-text-field
              ...
              v-on="on"
            ></v-text-field>
          </template>
          <v-date-picker v-model="date" no-title @input="menu1 = false"></v-date-picker>
        </v-menu>
</template>

<script>
export default {
  name: 'HelloWorld'
  ...
};
</script>

Этот компонент скомпилирован в пакет helloworld.umd.min.js и предоставлен службой в виде файла stati c: 

vue-cli-service build --mode production --target lib --inline-vue --formats umd-min --watch --name helloworld ./src/components/HelloWorld.vue

На стороне клиента мы связываем фрагмент на указанной странице c во время выполнения, создавая тег <script src="http://localhost:2000/helloworld.umd.min.js"> с URL-адресом, указывающим на фрагмент службы. Когда браузер выбирает пакет, компонент HelloWorld доступен и отображается с использованием Vue динамических c компонентов, например: 

// component is the HellowWorld bundled component
<component :is="component" v-bind="bindProps"></component>

Этот подход не идеален, но работает в целом. В большинстве случаев связанные компоненты выбираются, обрабатываются и отображаются в виде кусочка клиента без каких-либо проблем. Однако в приведенном выше примере компонента мы используем Vuetify DatePicker из примеров Vuetify. Визуализация этого фрагмента на стороне клиента приводит к полной вкладке браузера cra sh, поэтому вкладка по-прежнему не отвечает. Я уже обнаружил, что это вызвано слотом с ограничением, поэтому удаление определения следующего слота исправит браузер cra sh: 

<template v-slot:activator="{ on }">...

Также другие сложные компоненты Vuetify работают не правильно, используя описанные подходить. Например, компоненты Vuetify Carousel или Tabs ( tabs ) визуализируются без содержимого вкладок, как показано на следующем снимке экрана: enter image description here

Основные вопросы

Что может вызвать описанные проблемы рендеринга при компиляции вложенных компонентов Vuetify? Каков правильный подход к компиляции Vue. js + Vuetify. js компонентов в пакет, чтобы избежать этой проблемы?

Любые рассуждения будут полезны!

...