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 PayPoppackage.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中向我提出您的问题与建议，十分感谢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新文章
热门文章
猜你喜欢
