Как оптимизировать пакетирование пользовательских компонентов VUE с помощью сторонних библиотек с Vue Cli 3? - PullRequest
Новая
       48

Как оптимизировать пакетирование пользовательских компонентов VUE с помощью сторонних библиотек с Vue Cli 3?

1 голос
/ 07 апреля 2019

Я собираю свою библиотеку внешних компонентов vue и публикую ее в npm.Мои компоненты расширяют компоненты пользовательского интерфейса Element.

Я выполнил действия, описанные в этой статье, и пока он работает нормально.https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3

Пакет npm

https://www.npmjs.com/package/@bochen/example-lib

скрипт пакета 

"build-bundle": "vue-cli-service build --target lib --name exampleLib ./src/components/index.js",

src / components / index.js 

import Vue from 'vue';
import BcButton from './Button.vue';

const Components = {
  BcButton,
};

Object.keys(Components).forEach((name) => {
  Vue.component(name, Components[name]);
});

export default Components;

src / components / Button.vue 

<template>
  <el-button v-bind="$props"
             :class="{
               'button-full': full,
             }"
  >
    <slot/>
  </el-button>
</template>

<script>
import { Button } from 'element-ui';

export default {
  name: 'BcButton',
  extends: Button,
  props: {
    full: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped>
  .button-full {
    width: 100%;
  }
</style>

Issue

Проблема в том, что после того, как я установил свою библиотеку в другом проекте, мне все еще нужно импортировать Element UI в дополнение кэто работает.

main.js 

import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui';
import ExampleLib from '@bochen/example-lib';

import 'element-ui/lib/theme-chalk/index.css';
import '@bochen/example-lib/dist/exampleLib.css';

Vue.use(Element);

Object.keys(ExampleLib).forEach((name) => {
  Vue.component(name, ExampleLib[name]);
});

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Есть ли возможность, я мог бы просто импортировать свою библиотеку и работать как я ожидал?

...