我正在构建我的外部vue组件库并发布到npm。我的组件扩展了Element UI组件。
我已按照本文中的步骤进行操作,到目前为止效果很好。 https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3
https://www.npmjs.com/package/@bochen/example-lib
"build-bundle": "vue-cli-service build --target lib --name exampleLib ./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;
<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>
问题是我在另一个项目中安装了库之后,除使其工作外,我仍然需要导入Element UI
。
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')
有没有可能,我可以导入库并按预期工作?