乐趣区

关于vue.js:如何发布一个公共的-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,你曾经学会公布本人的组件了

退出移动版