如何发布一个公共的 vue 组件到 npm

如何发布一个公共的 vue 组件到 npm

参考文章:https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/
介绍一下如何将一个写好的组件发布到公共的 npm 上,可以让其像其它插件一样下载使用。

一、全局安装工具 vue-sfc-rollup

npm i -g vue-sfc-rollup

发布一个 vue 组件,需要配置不少东西,并要符合发布 vue 组件的内容格式,这个过程可以通过 vue-sfc-rollup 这个工具来实现,它简化了需要发布 vue 组件的过程,好让你只需要关注组件的实现。

二、使用 vue-sfc-rollup 初始化项目

在你需要创建这个 vue 组件的文件夹中执行初始化操作,然后就会进入初始化进程,这个过程跟新建一个 vue 项目差不多。

sfc-init
1. 这个组件用于哪个版本 v2 还是 v3

在这里插入图片描述

2. 是一个组件库还是只是一个单独的组件

在这里插入图片描述

3. 输入这个项目名

在这里插入图片描述

4. 这个组件名是

定义组件名,默认跟项目名一致,也可以自己定义名字
在这里插入图片描述

5. 这个组件使用 js 还是 ts 编写

在这里插入图片描述

6. 输入盛放组件文件的目录位置,默认在项目根目录

如果是单组件项目,放在根目录也无妨
在这里插入图片描述

7. 自此,这个组件项目就初始化完成了

在这里插入图片描述
项目目录如下:

在这里插入图片描述

三、实现组件的功能

不要被上面的目录结构吓到,你不需要理解每个目录的作用,把这个当成一个普通的 vue 项目就可以,在你定义的组件文件中实现你的代码逻辑。

你可以根据自己需要添加 scss 支持什么的。
比如我的 kyle-password-pad 组件中就用到了 scss ,所以我安装了 scss 支持,并添加了自己常用的一些通用方法库和 scss 变量库。再提示一遍,这项目就只是一个普通的 vue 项目,放心大胆的写就可以了。

1. 安装项目依赖

先安装依赖,用 npm 或 yarn 都可以,我喜欢用 yarn

npm i
# 或
yarn 

2. 运行查看初始状态

安装依赖之后,可以直接运行 npm serve 来运行这个项目,就可以看到项目初始状态了

npm run serve 

就能看到初始的项目状态了,它给放了一个简单的小例子,如下:
在这里插入图片描述

3. 好了,现在可以修改你的 vue 文件,实现自己的功能了

我放了一个数字输入的 pad,并添加了 scss 支持,全代码可以看 github 项目例子,就不放源码了,占篇幅。

github kyle-password-pad:

我的例子是这样的

在这里插入图片描述

四、发布之前完善一下你的组件包信息

在生成最终的发布文件之前,最好完善一下你这个组件的信息,打开 package.json 文件,完善一下上面的说明文件内容,版本号最好以 0.0.1 开始,比如我的是:
在这里插入图片描述

五、生成发布用的代码

vue 组件的发布包中需要包含这三种文件
在这里插入图片描述
幸运的是,有了 vue-sfc-rollup 这个工具之后,你只需要执行一下 build 指令即可自动生成。
在你 serve 测试完成你的组件功能之后,就可以执行下面指令来生成最终发现需要的文件了。

npm run build 

六、发布你的 vue 组件包

1. 注册 npm 账号

发布组件包,需要你登录 npm,如果没有 npm 账号,去官网注册一下: https://www.npmjs.com/

2. 命令行登录 npm

注册完成之后,回到命令行,执行以下指令登录到 npm

如果登录失败,可能是因为你目前使用的不是官方的 npm 源地址,国内很多开发者都因为网速慢,而切换到了 腾讯或淘宝的 npm 源。但这些源是不认 npm 的官方账号的。
具体解决方法详见: NPM login 的时候出错,无法登录,解决
npm login

在这里插入图片描述

3. 发布组件

登录完成之后,切换到你的组件项目目录,就可以发布组件了

npm publish

在这里插入图片描述
这就发布完成了,这个名为 kyle-password-pad 的包,已经可以被全世界的 vue 开发者使用了。

七、将刚才发布的组件添加到自己的 vue 项目中看看

发布之后,最好完善一下你这个组件的 github 地址信息什么的,每个 npm 包都对应着一个 github 项目地址,这个方便其它开发者查阅。

既然组件已经发布了,就可以像使用其它 vue 组件那样引入到自己项目中进行使用了。

1. 安装这个组件

npm i kyle-password-pad

package.json 里就能看到这个包的身影了
在这里插入图片描述

2. 在页面中使用它

引入它,使用它

在这里插入图片描述
再看页面中的样子,能正常使用和显示!

在这里插入图片描述

八、OK,你已经学会发布自己的组件了


青枫ky
个人成长记录

前端,喜欢 Javascript scss,喜欢做一些实用的小工具

640 声望
18 粉丝
0 条评论
推荐阅读
Vue微信公众号开发踩坑记录
JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核的差异性导致的兼容问题

imwty132阅读 68.3k评论 81

「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs39阅读 4.7k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.1k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.6k评论 3

封面图

前端,喜欢 Javascript scss,喜欢做一些实用的小工具

640 声望
18 粉丝
宣传栏