共计 1805 个字符，预计需要花费 5 分钟才能阅读完成。
如何公布一个公共的 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-init1. 这个组件用于哪个版本 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-padpackage.json 里就能看到这个包的身影了
2. 在页面中应用它
引入它，应用它
再看页面中的样子，能失常应用和显示！