注册账号，都是常规操作，需要填写的有全名、邮箱、用户名和密码。之后邮箱会收到确认邮件，标题为“Verify your npm email address”，发件人是“npm, Inc.”，点击邮件中的链接就可以激活账户了。
登录账号，点击右上角的头像，选择“Create an Organization”，就可以创建你自己的组织了。
创建组织
组织有两种选项，支持私有发布的需要缴纳每月7刀的“管理费”，而我们现在只需要发布一个公共的包，那就可以选择免费版本。
选择公开组织
本地命令行登陆npm
npm login
之后按提示输入用户名和密码即可。
可以使用
npm whoami
来检查登陆是否成功。如果成功的话，这条命令会返回你的用户名。
给你的组件库命名
你需要给你的这个组件库起一个名字，这里用到的是package.json中的name字段。注意@后的名称就填写你刚刚创建的组织的名称。
{ "name": "@abc/my-banner" }
最终步骤：再次构建与发布
最后，使用yarn package重新构建一遍这个组件库，然后使用：
npm publish --access public
来发布这个组件库。
注意这里可能会报下面的错误
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.
解决办法很简单，按照提示删除package.json中的private字段，或将其设置为false都可以。
成果
顺利发布后，就可以在你的组织页面看到刚刚发布的这个包了。
发布成功
在此之后，你可以新建一个项目，然后
yarn add @abc/my-banner
来把你刚刚发布的这个包添加为依赖项。由于我们之前已经在src/components/index.js中对组件进行了全局注册，所以你现在可以直接在template中调用<Banner>。
总结
以上，我们就从零开始实现了一个Vue组件在npm上发布的流程，是不是很简单呢？那么，现在就开始发布一个你自己的组件吧！希望对大家的学习有所帮助，也希望大家多多支持脚本之家
参考文章
How to create and publish your own VueJS Component library on NPM using @vue/cli 3.0
您可能感兴趣的文章: