Question

几天来我一直在尝试设置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';

因此，我想我没有正确构建dist包，因为这就是我仅使用“ @ company / vue-components”时引用的内容。如果在控制台中打印每个变量，则可以看到分发捆绑软件的导入不包括“安装”功能，但是源导入包括：

这里是我能想到的所有源代码。这是使用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"
  },
  ...
}

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与我上面的帖子相同

Vue组件库-无法从dist