github上发布插件并且在项目内引用自己发布的插件 npm

小灰灰 2023-06-07 10:35 26阅读 0赞

在做项目的过程中，经常发现别人的插件里功能不齐全或者没有自己想要的功能，想添加一点自己特别需要的功能，在这里不多做怎么去写一个插件，自己也是看网上的资料，在这里只是记录一下，发布一个插件，并且去使用它的步骤，如果可以帮助到大家，也是极好的。

1.初始化项目

vue init webpack-simple XXXXX(此处为插件名)  
使用vue创建一个简单的项目，删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容

这是插件项目。当然您也可以复制别人的插件项目，在代码中添加您自己需要的功能

2.编写插件

（略 如题，只是记录如何发布插件）

3.尝试使用

插件编写完成 可以本地app.vue先运行一下 是否效果正常 再调整

4.更改配置文件

现在就是核心部分了 上面或多或少还是与怎样去生成一个插件相关的

在index.js内

import vuePayPop from './vue-pay-pop.vue'  
const PayPop = \{  
  install(Vue, options) \{  
    Vue.component(vuePayPop.name, vuePayPop)  
  \}  
\}  
if (typeof window !== 'undefined' && window.Vue) \{  
  window.PayPop = PayPop  
  Vue.use(PayPop)  
\}  
export default PayPop  
package.json

version后添加版本号，可自定

private值设为false（必须）

在repository内的url字段 填上该项目的github地址，可以把项目传到自己的GitHub上

修改箭头中所指

1. 你的插件版本号，以后每次上传npm都需要更改

2. 不设为false无法发布

3. 填写你自己的github托管地址

webpack.config.js

修改entry和filename

index.html

<div id="app"></div>  
<script src="/dist/vue-pay-pop.js"></script>  
（dist文件大家在命令行中输入npm run build就会自定生成）.  
5.发布npm

你需要去npm官网注册一个npm帐号

注册好后

进入到项目目录下

输入你的用户名，密码，邮箱

成功登录后我们在输入

ok，我们就发布成功！

——————————————————————————————————————————————————————

发布npm可能的遇到问题 所以完整添加一遍

D:\\cj\\vue\\vue-table-test>npm adduser  
Username: XXXXXXX  
Password:  
Email: (this IS public) XXXXXX@XXX.com  
Logged in as XXXXXX on https://registry.npm.taobao.org/.  
   
D:\\cj\\vue\\vue-table-test>npm whoami（该命令查看当前npm账号）  
XXXXXXX（对应显示账号）  
D:\\cj\\vue\\vue-table-test>npm login  
Username: (XXXXXXX)  
Password: (<default hidden>)  
Email: (this IS public) (XXXXXX@XXX.com)  
Logged in as XXXXXXX on https://registry.npm.taobao.org/.  
   
D:\\cj\\vue\\vue-table-test>npm publish  
6.引用

在你的项目中 npm install vue-pay-pop --save

main.js

import vuePayPop from "vue-pay-pop"  
vue.use(vuePayPop)  
这样我们就可以在自己的vue文件中直接引用啦...

本项目的插件 也是在别人的基础上 略微修改 所以在插件编写上没有很多说明。

当然 本文的正题是 发布 二字，是如何发布的一个过程！

转载：https://blog.csdn.net/chenjing0823/article/details/82492855