Как я могу создать несколько Vue. js компонентов для Native Web Components, используя Vue CLI одновременно? - PullRequest
Новая
       44

Как я могу создать несколько Vue. js компонентов для Native Web Components, используя Vue CLI одновременно?

0 голосов
/ 05 апреля 2020

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

main. js: 

import Vue from 'vue';
import App from './App.vue';
import wrap from '@vue/web-component-wrapper';

const customElement = wrap(Vue, App);

window.customElements.define('sky-chat', customElement);

Cli команда: 

vue build --target wc --name sky-chat ./src/main.js

Но это только для одного компонента. Как я могу собрать кучу файлов. vue, чтобы разделить веб-компоненты сразу в отдельные файлы js?

Как я могу сгенерировать тест html, автоматически содержащий все компоненты внутри него для тестирования в dist папка после сборки?

Спасибо

Ответы [ 2 ]

1 голос
/ 06 апреля 2020

Версия 4.3.0 добавлена ​​поддержка , указывающая несколько веб-компонентов , которые будут создаваться с помощью шаблонов глобусов, разделенных запятыми.

Примеры: 

vue-cli-service build --target wc --name myprefix src/components/core*.vue,src/components/basic*.vue

vue-cli-service build --target wc --name myprefix src/components/myFirst.vue,src/components/mySecond.vue

Создает отдельный веб-компонент для каждой указанной точки входа и один demo.html, содержащий все компоненты. Однако, похоже, что поддержка отдельных файлов .js для каждого веб-компонента отсутствует. Веб-компоненты объединены в один файл.

0 голосов
/ 05 апреля 2020

Вы можете создать плагин vue для объединения vue файлов. 

// plugin.js

// your components
import Component1 from '/src/components/Component1.vue'
import Component2 from '/src/components/Component2.vue'
import Component3 from '/src/components/Component3.vue'

// This exports the plugin object.
export default {
  install (Vue, options) {
     // Add a component or directive to your plugin, so it will be installed globally to your project.
     Vue.component('component1', Component1)
     Vue.component('component2', Component2)
     Vue.component('component3', Component3)
  }
}


// your main vue file:

import myPlugin from './plugin.js'
Vue.use(myPlugin);

new Vue({
//...
})

Теперь вы можете использовать все компоненты, включенные в плагин, где угодно, без необходимости импортировать их в каждый файл.

Правильно ли я понял ваш вопрос?

...