如何使用@vue/cli 3.0在npm上创建，发布和使用你自己的Vue.js组件库

译者按： 你可能 npm 人家的包过成千上万次，但你是否有创建，发布和使用过自己的 npm 包？

本文采用意译，版权归原作者所有

尽管我已经在工作上用了 Vue.js 一段时间，但我从不需要在 npm 上发布组件。但最近发现在不同的项目重写组件是件非常蛋疼的事，所以当我第三次使用 Vue.js 开发项目时，我觉得我们是时候需要一些高度可配置并且可重用的组件了。

首先，你需要安装 vue-cli 才能开始。


npm install -g @vue/cli
# 或者
yarn global add @vue/cli

vue create my-vue-library

我们正在使用 vue-cli 3.0 beta 版本。你可能会 Github 的README.md看到一条警告：“除非您有冒险精神，否则不要在生产中使用”，很显然我很有冒险精神，哈哈。

你现在的控制面应该看起来如下图：

现在你只需开始做以下事情：


npm run serve

现在开始创建一个简单的组件，来看一个Banner组件的例子。

<template>
    <div class="banner" :style="bannerStyles" :class="`banner__${position}`">
        <slot></slot>
    </div>
</template>

<script>
    const defaultStyles = {
        left: 0,
        right: 0
    };
    export default {
        props: {
            position: {
                type: String,
                default: "top",
                validator(position) {
                    return ["top", "bottom"].indexOf(position) > -1;
                }
            },
            styles: {
                type: Object,
                default: () => ({})
            }
        },
        data() {
            return {
                bannerStyles: {
                    ...defaultStyles,
                    ...this.styles
                }
            };
        }
    };
</script>

<style lang="scss" scoped>
    .banner {
        padding: 12px;
        background-color: #fcf6cd;
        color: #f6a623;
        text-align: left;
        position: fixed;
        z-index: 2;
    }
    .banner__top {
        top: 0;
    }
    .banner__bottom {
        bottom: 0;
    }
</style>

将组件注册为名为Banner的组件后，可以在模板中简单使用该组件：

<Banner>Fundebug：最专业的应用错误监控平台!</Banner>

你可以在CodeSandbox查看这个组件的 demo

Fundebug错误实时监控为您的 Vue 项目保驾护航！

现在，如果你想通过 npm 使用这个组件，你必须做一些事情。

第 1 步 - 设置库构建

你需要利用vue-cli将你的组件构建为库。将vue-cli-service build --target lib --name myLib [entry]添加到你的 package.json 脚本中。

默认情况下，[entry]是你的 App.vue，但你可以将其更改为你导入这些组件的任何文件的相对路径。你可能会也可能不会选择全局注册这些组件，但如果我是你，我会将它们与我的库名称一起注册为前缀。程序员用组件的时候，代码越少越好。

我已经为我的脚本添加了build-bundle，以便我可以运行npm run build-bundle来创建我的库包。

这会产生类似于以下的输出：

对于 CodeSandbox 示例，输入文件应该如下所示：

第 2 步 - 指向 package.json 中的输出文件

为了确保package.json中的main属性正确指向输出文件。我更喜欢使用commonjs包。

第 3 步 - 以用户身份在 npm 上添加/登录

确保你在 npm 上注册。 npm adduser注册一个新用户和npm login作为一个现有用户登录。

第 4 步 - 验证 npm 用户凭证

输入npm whoami来验证你的用户名。

第 5 步 - 命名你的组件库

为你的包选择一个名字，你必须确保它尚未被使用。确保把它放在你的 package.json 中。

第 6 步 - 构建

通过执行在第 1 步中添加的程序包脚本来构建捆绑软件。


npm run build-bundle

第 7 步 - 在 npm 上发布组件库

运行npm publish –access public来发布该库供公众访问。

就是这样。你完成了在 npm 上发布你的 Vue 组件库！

第 8 步 - 如何使用你新发布的库

从 npm 安装组件库并将组件导入代码中。安装：


npm install --save [你的库名]

其中[你的库名]是你在第 5 步中给出的库的名称。

在你的main.js或类似的入口点，只需使用以下命令导入你的库：


import '你的库名';

现在，你可以开始使用你的组件了，因为我们在第一步中全局注册了这些组件。

对于我们的示例组件Banner，当我们注册组件时，组件名称为 FlockBanner。所以，你可以直接在你的模板中使用它：

<flock-banner>这是你的Banner是示例</flock-banner>

使用上面提到的组件库查看实例：https://codesandbox.io/s/n9n7yy2lwp

整个过程我们就完成了。在 Vue.js 团队提出 CLI 版本 3 后，构建自己的组件库以便重用变得非常容易。如果觉得这个流程有点帮助，点个赞呗，同时也支持下Fundebug哦！

关于Fundebug

Fundebug专注于JavaScript、微信小程序、支付宝小程序线上应用实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了80亿+错误事件。欢迎大家免费试用！

版权声明

转载时请注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2018/06/08/vuejs-component-on-npm/

您的用户遇到BUG了吗？

体验Demo 免费使用