Vue组件库-无法从dist导入

Question

几天来，我一直在尝试设置Vue组件库。我看了几个教程，并通读了一些流行的现有UI库的代码。我的问题归结为：

我的库称为@Company/vue-组件

我将我的库安装到一个带有npm的项目中：

npm install @company/vue-components

然后，我尝试将我的库注册为Vue的插件：

import Vue from 'vue';
import VueComponents from '@company/vue-components';

Vue.use(VueComponents);

我尝试在vue cli中使用我的组件。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';

所以，我猜我没有正确构建dist包，因为当我简单地使用“@company/vue components”时，就会引用它。如果我在控制台中打印每个变量，我可以看到分发包的导入不包括“安装”功能，但源导入包括：

这是我能想到的所有相关源代码。这是使用vue-sfc-rollup cli工具和复制Buefy库设置的混搭。

<template>
    <button class="button" v-bind="$attrs" v-on="$listeners">
        <slot></slot>
    </button>
</template>

<script>
export default {
    name: 'EButton',
    inheritAttrs: false
};
</script>

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
};

import EButton from './EButton';

export {
    EButton
};

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;

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;

{
  "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"
  },
  ...
}

Answer 1

经过几周的努力，我终于用Vue CLI工具重新启动了这个项目。使用vue cli service build命令按照我的需要构建库。完整命令：

vue-cli-service build --no-clean --target lib --name vue-components src/index.js

src/index。js在我上面的帖子中没有改变