时间:2021-05-25
TL;DR 本文细致讲解了在NPM上发布一个Vue组件的全过程,包括创建项目、编写组件、打包和发布四个环节。
创建项目
这里我们直接利用@vue/cli来生成项目。如果没有安装@vue/cli的话,可以使用以下方法进行安装:
此外,如果安装了npx(高版本的nodejs发行版会自带这一工具)的话,还可以很方便地通过npx vue这一方式实现免安装使用。
接下来就可以创建项目了,这里我们创建一个my-banner项目,里面将会包含一个Banner组件:
@vue/cli会提示你选择一个预置(preset)的配置,这里我们直接选择“default”(babel, eslint)就可以,之后@vue/cli会自动调用yarn或npm来进行依赖的下载。下载完成后就可以进入项目目录了:
此时的目录结构为:
下面启动开发环境本地服务器:
打开localhost:8080,就可以看到默认的首页:
@vue/cli 3.0自动生成的默认首页
编写组件
我们现在开始编写一个非常简单的Banner组件。
我们将Banner.vue置于src/components目录下,同时在该目录下新建一个index.js文件,用来注册Vue组件。
接下来我们修改一下@vue/cli自动生成的src/components/HelloWorld.vue文件,引用一下我们刚刚编写的Banner组件:
修改一下项目的主入口main.js
因为前面定义style时使用了scss,所以还需要安装两个开发环境依赖项
最后执行
就可以在localhost:8080看到效果了:
添加Banner后的页面效果
可以看到,我们编写的Banner组件已经成功在页面上渲染出来了。
打包
接下来,我们需要对这个组件进行打包。这里我们可以使用@vue/cli 3.0自带的打包功能。打开package.json文件,在scripts中增加一项:
然后执行yarn package,会在dist目录下生成下列文件:
接下来,需要将package.json中的main字段指向刚刚生成的库文件。这里以commonjs为例(umd应该也是没问题的):
然后,我们需要在package.json的files字段中声明这个组件库项目需要包含的文件:
这样就可以打包阶段就算是完成了。
发布
注册NPM账号并创建组织
首先登陆NPM官网
npmjs.com
注册账号,都是常规操作,需要填写的有全名、邮箱、用户名和密码。之后邮箱会收到确认邮件,标题为“Verify your npm email address”,发件人是“npm, Inc.”,点击邮件中的链接就可以激活账户了。
登录账号,点击右上角的头像,选择“Create an Organization”,就可以创建你自己的组织了。
创建组织
组织有两种选项,支持私有发布的需要缴纳每月7刀的“管理费”,而我们现在只需要发布一个公共的包,那就可以选择免费版本。
选择公开组织
本地命令行登陆npm
之后按提示输入用户名和密码即可。
可以使用
来检查登陆是否成功。如果成功的话,这条命令会返回你的用户名。
给你的组件库命名
你需要给你的这个组件库起一个名字,这里用到的是package.json中的name字段。注意@后的名称就填写你刚刚创建的组织的名称。
最终步骤:再次构建与发布
最后,使用yarn package重新构建一遍这个组件库,然后使用:
来发布这个组件库。
注意这里可能会报下面的错误
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都可以。
成果
顺利发布后,就可以在你的组织页面看到刚刚发布的这个包了。
发布成功
在此之后,你可以新建一个项目,然后
来把你刚刚发布的这个包添加为依赖项。由于我们之前已经在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
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了自定义vue组件发布到npm的方法,分享给大家,具体如下:为什么会有这个想法呢,主要是vue项目中自定义的组件在多个项目中使用。导致修改bug的时候,
本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用。功能说明多层弹出时,只有一个背景层。弹出层嵌入内部组件
制作了一套自己的组件库,并发布到npm上,项目代码见https://github.com/hamger/hg-vcomponents前期准备有一个npm账号安装
从零开始使用Webpack搭建Vue3开发环境创建项目首先需要创建一个空目录,在该目录打开命令行,执行npminit命令创建一个项目,这个过程会提示输入一些内容
如果你需要让一个工具函数在每个组件可用,可以把方法挂载到Vue.prototype上。在main.js中:Vue.prototype.method=functi