如何发布一个公共的 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. 输入这个项目名

如何发布一个公共的 vue 组件到 npm_第1张图片

4. 这个组件名是

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

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

如何发布一个公共的 vue 组件到 npm_第2张图片

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

如果是单组件项目,放在根目录也无妨
如何发布一个公共的 vue 组件到 npm_第3张图片

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

如何发布一个公共的 vue 组件到 npm_第4张图片
项目目录如下:

如何发布一个公共的 vue 组件到 npm_第5张图片

三、实现组件的功能

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

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

1. 安装项目依赖

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

npm i
# 或
yarn 

2. 运行查看初始状态

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

npm run serve 

就能看到初始的项目状态了,它给放了一个简单的小例子,如下:
如何发布一个公共的 vue 组件到 npm_第6张图片

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

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

github kyle-password-pad:

我的例子是这样的

如何发布一个公共的 vue 组件到 npm_第7张图片

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

在生成最终的发布文件之前,最好完善一下你这个组件的信息,打开 package.json 文件,完善一下上面的说明文件内容,版本号最好以 0.0.1 开始,比如我的是:
如何发布一个公共的 vue 组件到 npm_第8张图片

五、生成发布用的代码

vue 组件的发布包中需要包含这三种文件
如何发布一个公共的 vue 组件到 npm_第9张图片
幸运的是,有了 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

如何发布一个公共的 vue 组件到 npm_第10张图片

3. 发布组件

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

npm publish

如何发布一个公共的 vue 组件到 npm_第11张图片
这就发布完成了,这个名为 kyle-password-pad 的包,已经可以被全世界的 vue 开发者使用了。

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

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

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

1. 安装这个组件

npm i kyle-password-pad

package.json 里就能看到这个包的身影了
如何发布一个公共的 vue 组件到 npm_第12张图片

2. 在页面中使用它

引入它,使用它

如何发布一个公共的 vue 组件到 npm_第13张图片
再看页面中的样子,能正常使用和显示!

如何发布一个公共的 vue 组件到 npm_第14张图片

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

你可能感兴趣的