我已经尝试了几天来设置Vue组件库。我查看了几个教程并阅读了一些受欢迎的现有UI库的代码。我的问题归结为:
我的库名为@company/vue-components
我使用npm将我的库安装到项目中:
npm install @company/vue-components
然后我尝试将我的库注册为Vue插件:
import Vue from 'vue';
import VueComponents from '@company/vue-components';
Vue.use(VueComponents);
我尝试在由vue-cli生成的About.vue页面中使用我的组件(名为EButton):
<template>
<div class="about">
<h1>This is an about page</h1>
<e-button color="primary">Click this button</e-button>
</div>
</template>
<script>
export default {
};
</script>
但我收到了一个错误:
[Vue warn]: Unknown custom element: <e-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option
如果我回到注册插件的地方,只需要做一个修改就可以让它正常工作:
import VueComponents from '@company/vue-components/src/index';
所以,我猜我没有正确地构建我的分发包,因为当我简单使用 "@company/vue-components" 时,它引用的就是它。如果我在控制台中打印每个变量,我可以看到分发包的导入不包括 "install" 函数,但源代码导入包括:
这是我能想到的所有相关源代码。这是使用vue-sfc-rollup cli工具和复制Buefy库设置的混合体。EButton.vue
<template>
<button class="button" v-bind="$attrs" v-on="$listeners">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'EButton',
inheritAttrs: false
};
</script>
EButton/index.js
import EButton from './EButton.vue';
const Plugin = {
install(Vue) {
Vue.component(EButton.name, EButton);
}
};
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
}
else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(Plugin);
}
export default Plugin;
export {
EButton
};
components/index.js
import EButton from './EButton';
export {
EButton
};
src/index.js
import * as components from './components/index.js';
const install = function(Vue) {
if (install.installed) {
return;
}
install.installed = true;
for (let name in components) {
Vue.use(components[name]);
}
};
const Plugin = { install };
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
}
else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(Plugin);
}
export default Plugin;
rollup.config.js
import vue from 'rollup-plugin-vue';
import buble from 'rollup-plugin-buble';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';
import { terser } from 'rollup-plugin-terser';
import minimist from 'minimist';
const argv = minimist(process.argv.slice(2));
const baseConfig = {
input: 'src/index.js',
plugins: {
preVue: [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
}),
commonjs()
],
vue: {
css: true,
template: {
isProduction: true
}
},
postVue: [
buble()
]
}
};
const external = [
];
const globals = {
};
const buildFormats = [];
if (!argv.format || argv.format === 'es') {
const esConfig = {
...baseConfig,
external,
output: {
file: 'dist/vue-components.esm.js',
format: 'esm',
exports: 'named',
globals
},
plugins: [
...baseConfig.plugins.preVue,
vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
terser({
output: {
ecma: 6
}
})
]
};
buildFormats.push(esConfig);
}
if (!argv.format || argv.format === 'cjs') {
const umdConfig = {
...baseConfig,
external,
output: {
compact: true,
file: 'dist/vue-components.ssr.js',
format: 'cjs',
name: 'VueComponents',
exports: 'named',
globals,
},
plugins: [
...baseConfig.plugins.preVue,
vue({
...baseConfig.plugins.vue,
template: {
...baseConfig.plugins.vue.template,
optimizeSSR: true
}
}),
...baseConfig.plugins.postVue
]
};
buildFormats.push(umdConfig);
}
if (!argv.format || argv.format === 'iife') {
const unpkgConfig = {
...baseConfig,
external,
output: {
compact: true,
file: 'dist/vue-components.min.js',
format: 'iife',
name: 'VueComponents',
exports: 'named',
globals,
},
plugins: [
...baseConfig.plugins.preVue,
vue(baseConfig.plugins.vue),
...baseConfig.plugins.postVue,
terser({
output: {
ecma: 5
}
})
]
};
buildFormats.push(unpkgConfig);
}
export default buildFormats;
package.json
{
"name": "@company/vue-components",
"version": "1.0.0",
"description": "",
"main": "dist/vue-components.ssr.js",
"module": "dist/vue-components.esm.js",
"unpkg": "dist/vue-components.min.js",
"files": [
"dist/*",
"src/**/*.vue",
"!src/lib-dev.vue"
],
"scripts": {
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
"build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
"build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
},
...
}
package.json
中的main
入口是什么?例如,这里是 Vuex 组件库的链接 ~ https://github.com/vuejs/vuex/blob/dev/package.json#L5 - Phil