vue： V2.5.11

此篇尽量详细，清楚的讲解vue插件的开发到npm的发布，想想将你自己做的东西展示给广大“网民”，心里还是有点小激动的...…^_^

先上一下插件效果图------github传送门

下面我们就来说说详细做法：

1. 初始化项目

vue init webpack-simple vue-pay-keyboard

使用vue创建一个简单的项目，删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容

整理完后项目目录

2.编写插件

vue-pay-pop (源码大家可到github中自行获取)

<template> <div class="pay-box"> <!-- 输入框及键盘 --> <div :class="payPopOptions.isShow? 'pay-wrapper pay-wrapper-active' : 'pay-wrapper'"> <div class="pay-container" v-if="status"> <div class="pay-title"> {{title}} <div class="close-pay" @click="closePay"> <svg t="1501505446265" viewBox="0 0 1024 1024" version="1.1" xmlns="http://ponent(vuePayPop.name, vuePayPop) }}if (typeof window !== 'undefined' && window.Vue) { window.PayPop = PayPop Vue.use(PayPop)}export default PayPop

package.json

修改箭头中所指

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

2. 不设为false无法发布

3. 填写你自己的github托管地址（如何将代码上传github就不说了，大家可以参考Git教程---廖雪峰）

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，我们就发布成功！

6.引用

在你的项目中 npm install vue-pay-pop --save 下载我们的包

main.js

import vuePayPop from "vue-pay-pop"vue.use(vuePayPop)

这样我们就可以在自己的vue文件中直接引用啦...

ok，那到这里我们的内容就结束了。

另外如果大家觉得有用的话，欢迎github上献上您的star，当然也可以在评论或issues中向我提出您的问题与建议，十分感谢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。