Как вы монтируете сборку VueJS UMD на существующую HTML? - PullRequest
Новая
       72

Как вы монтируете сборку VueJS UMD на существующую HTML?

0 голосов
/ 06 марта 2020

Я пытался взять пару небольших компонентов из нашего основного приложения для использования на целевой странице, но мне не очень повезло!

У меня есть несколько HTML в DOM скажем: 

<div id="app">
 <h1>Demo Feature #1</h1>
 <demo-component />
</div>

У меня есть следующий файл ввода, marketing.ts: 

import Vue from "vue";
import Demo from "Demo.vue";

new Vue({
 el: 'app',
  components: {
    'demo-component': Demo,
  }
});

Когда на сайте запускается выходная сборка, DOM выглядит примерно так: 

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

Я ожидал, что пользовательский тег HTML будет заменен моим Vue компонентом.

docs утверждает, что это должно быть так:

Если нет ни функции рендеринга, ни опции шаблона, in-DOM HTML монтируемого элемента DOM будет извлечен как шаблон. В этом случае следует использовать сборку Runtime + Compiler Vue.

Кроме того, документы go в состоянии :

При использовании vue -loader или vueify шаблоны внутри файлов *. vue предварительно компилируются в JavaScript во время сборки. Вам не нужен компилятор в конечном пакете, и поэтому вы можете использовать сборку только во время выполнения.

В этом случае я использую VueCLI (с Vue Loader) для сборки мой вывод, который, как я понимаю, является сборкой только во время выполнения.

Компонент отлично работает в полном приложении. Яркая вещь, которую я вижу, - отсутствие render. Когда я использую это, он заменяет DOM на весь предоставленный компонент и теряет то, что уже было внутри.

Возможно ли извлечь несколько компонентов с помощью сборки lib и отобразить их в существующем DOM?

Дополнительная информация:

  • Использование команды построения vue-cli-service build --target lib --inline-vue --dest dist/lib/marketing --name marketing src/marketing.ts --no-clean
  • Использование VueCLI 4.2.2
  • Использование TypeScript и Vue Компоненты класса
  • Это CodePen показывает, что можно сделать

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

Чтобы решить эту проблему, я удалил аргумент --inline-vue из сборки CLI и добавил Vue. JS через CDN, ie. 

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

Я считаю, что это должно работать из одной библиотеки, так что это потенциально проблема с инструментом сборки.

0 голосов
/ 06 марта 2020

То, как я это сделал, это ...

1) завернуть мой компонент в js файл 

import MyWidgit from './MyWidgit.vue';

// eslint-disable-next-line import/prefer-default-export
export const mount = (el, props) =>
  new window.Vue({
    el,
    render: h => h(Filter, {props})
  });

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

{
    input: `./src/${widgetName}/${widgetName}.js`, // Path relative to package.json
    output: {
      format: 'umd',
      name: widgetName,
      file: `./dist/${widgetName}.js`,
      exports: 'named',
      external: ['vue'], // requires vuejs lib to be loaded separately
      globals: {
        vue: 'Vue',
      },
    },
    //... etc
}

3) добавить к html

<script src="/dist/vue.js"></script>
<script src="/dist/mywidgit.js"></script>

<!-- mywidgit mount target-->
<div id="widget1"></div>

<!-- init and mount -->
<script>
  mywidgit.mount('#widget1', {
    msg: 'all is well',
  });
</script>
...