这篇文章主要介绍了vue2.0+ 从插件开发到npm发布的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue： V2.5.11
此篇尽量详细，清楚的讲解vue插件的开发到npm的发布，想想将你自己做的东西展示给广大“网民”，心里还是有点小激动的……^_^
先上一下插件效果图——github传送门本文来源gao@daima#com搞(%代@#码网@
下面我们就来说说详细做法：
1. 初始化项目
vue init webpack-simple vue-pay-keyboard
使用vue创建一个简单的项目，删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容
整理完后项目目录
2.编写插件
vue-pay-pop (源码大家可到github中自行获取)
<div class="pay-box"> <!-- 输入框及键盘 --><div> <div class="pay-container"> <div class="pay-title"> {{title}} <div class="close-pay"> </div></div><div class="pay-input-wrapper"> <div class="pay-input"> </div></div><div class="pay-keyboard-wrapper"> <div class="pay-keyboard"> <div class="pay-key"> {{item}} </div></div><div class="pay-keyboard-bottom"> <div class="pay-key-bottom pay-key-blank"></div><div class="pay-key-bottom pay-key-middle">0</div><div class="pay-key-bottom pay-key-del"></div></div></div></div><!-- 结果显示 --><div class="pay-result"> <div class="loader"></div><div>{{loadingTxt}}</div></div></div><!-- 遮罩层 --><div class="gray-wrapper"></div></div>
export default { name: 'vue-pay-pop', props: ['payPopOptions'], data () { return { //可选参数，支持改变 //顶部文字 title: this.payPopOptions.title || '请输入支付密码', //密码长度 pwdLength: this.payPopOptions.pwdLength || 6, //底部删除按钮 del: this.payPopOptions.del || '', //默认等候文字 loadingTxt: this.payPopOptions.loadingTxt || '请稍候...', //默认等候时间 loadingTime: this.payPopOptions.loadingTime || 1000, //显示结果后，多久重回默认 resultTime: this.payPopOptions.resultTime || 1000, //成功文字 successTxt: this.payPopOptions.successTxt || '支付成功', //失败文字 failTxt: this.payPopOptions.failTxt || '支付失败', //默认参数，无法改变 //键盘数字(1~9) keyBoards: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], //键入的值 val: [], //默认输入框与等待层是否显示 status: true } }, methods: { val2input(item) { this.val.push(item) if (this.val.length == this.pwdLength) { //打开等待层 this.status = false //输入完毕后将值传递给父组件 this.$emit('inputDown', this.val.join('')) //清空数据 this.val = [] } }, delVal () { if (this.val.length > 0) this.val.pop() }, closePay () { this.payPopOptions.isShow = false; }, $payStatus(flag = false) { const that = this //模拟等候feel setTimeout(() => { if (flag) { //成功 this.loadingTxt = this.successTxt //关闭输入层，重置等待语 setTimeout(function() { that.payPopOptions.isShow = !flag that.status = true that.loadingTxt = that.payPopOptions.loadingTxt || '请稍候...' }, this.resultTime) } else { //失败 this.loadingTxt = this.failTxt //重新打开输入层，重置等待语 setTimeout(function() { that.status = true that.loadingTxt = that.payPopOptions.loadingTxt || '请稍候...' }, this.resultTime) } }, this.loadingTime) } } }
基本源码都在这里了，实现方法比较简单，这里就不多过介绍了…
3.尝试使用
我们先尝试在本地app.vue中使用
<div id="app"> <div>点击弹出支付框</div></div>
import vuePayPop from './lib/vue-pay-pop' export default { name: 'app', data () { return { payPopOptions: { isShow: false }, } }, components: { vuePayPop }, methods: { inputDown(val) { //模拟检查数据 setTimeout(() => { if (val == '111111') { this.$refs.pay.$payStatus(true) } else { this.$refs.pay.$payStatus(false) } }, 1000) }, showPayPop() { this.payPopOptions.isShow = true; } } }
其中payPopOptions中isShow是必传项，用来控制弹出框的显隐
其他更多参数为可选参数
4.更改配置文件
ok，现在我们去更改配置文件，为我们的发布做准备
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
修改箭头中所指
1. 你的插件版本号，以后每次上传npm都需要更改
2. 不设为false无法发布
3. 填写你自己的github托管地址（如何将代码上传github就不说了，大家可以参考Git教程—廖雪峰）
webpack.config.js
修改entry和filename
index.html
<div id="app"></div>
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中向我提出您的问题与建议，十分感谢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue2.0+ 从插件开发到npm发布的示例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：vue2.0+ 从插件开发到npm发布的示例代码
