写在前面
本次演示的是开发一个 vue手机虚拟支付键盘插件
主要讲解的是如何快速开发一个vue插件并发布到npm上
源码地址
所有代码都可以在我的GitHub vue-pay-keyboard 上查看,欢迎start..
demo演示地址
请用手机或者电脑仿真查看 vuepayboard
关于vue插件
插件一般都有如下几种形式导入
ES6
import vuePayKeyboard from 'vue-pay-keyboard'
// 通过require 导入
var vuePayKeyboard = require('vuePayKeyboard')
// 通过use挂载
Vue.use(vuePayKeyboard)
// 或者直接导入js文件
<script src="./dist/vue-pay-keyboard.js"></script>
无论是那种方式,都可以非常方便的在我们的项目当中使用,那么vue的插件应该如何写并发布到npm上供大家使用呢 其实非常的简单.
vue插件的规范
vue官网有给出明确的文档 vue插件开发 ,我们需要有一个公开方法 install,里面来包含我们要处理的业务。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
// plug.js
const plug = { // 定义一个对象
install (Vue, options) { // 需要拥有一个 install 方法
}
}
// 导出这个对象
export default plug
那么此时我们就可以通过 use的方式来使用
import plug from 'plug'
Vue.use(plug)
此时plup暴露给我们的 就是 install 函数定义的方法及属性
废话不多说，直接开始我们的插件开发,本次将直接使用vue简化版脚手架.至于为什么不从0开始搭建webpack,原因大致是因为网上太多诸如此类的博客了，就没必要再嚼别人的口香糖了，其次为了照顾那些不懂 webpack 配置的童鞋们以及达到快速开发的目的.
初始化项目
vue init webpack-simple vue-pay-keyboard
一切都基于这个脚手架来改造，只需要稍微改动就可以变成我们的东西,当然其中重要的配置 会相对应的解释
这里我选择了使用sass 因为后面我会用到 大家可以自行选择
OK 一切先用默认的,等会我们再改, 启动项目之后，我们把自带的多余的东西全删掉，然后在src下面新建一个 lib文件 用于存放我们的源码
并新建 index.js 用于作为我们的插件入口
新建一个 vue-pay-keyboard.vue 存放我们的开发的组件
至此 文件目录如下：
.
├── src // 源码目录
│ ├── lib // 源码
│ │ ├── index.js // 插件入口
│ │ ├── vue-pay-keyboard.vue // 组件
│ ├── App.vue // 页面入口文件
│ ├── main.js // 程序入口文件，加载各种公共组件
├── index.html // 入口html文件
.
非常简洁，然后开始写我们的index.js
我们需要导入.vue组件，并按照vue插件规范开发并且导出,这里我们用全局组件的方式作为插件,其他类型的插件调用方式也都大同小异
import vuePayKeyboard from './vue-pay-keyboard.vue' // 导入组件
const paykeyboard = {
install (Vue, options) {
Vue.component(vuePayKeyboard.name, vuePayKeyboard) // vuePayKeyboard.name 组件的name属性
// 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
// Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用
// 虽然没有明确规定用$开头 但是大家都默认遵守这个规定
}
}
export default paykeyboard // 导出..
ok 可以说基本的开发环境我们已经搭建完成了...你们信吗？
接下来我们写键盘的业务逻辑 会相对复杂，这里根于不同的业务需求，会有不同的解决方案，但是有些东西都是相通的.
如何写好一个组件
我认为通常一个好的插件 首要的是解决用户的问题,其次在有必要的情况下再进行个别案例的解决,通常需要如下：
- 通用性 // 能够满足大部分用户需求
- 可订制性 // 能够满足用户针对不同业务环境进行订制
- 可扩展性 // 能够满足用户对其他方面的拓展
我们先简单的写下样式 我尽量写的像支付宝的样式哈。。。
同时对外开放几个属性和方法
可传属性
| Property | Description | type | default |
|---|---|---|---|
| highlightColor | 点击时高亮的颜色 | String | #000 |
| pasDigits | 密码的位数 | Number | 6 |
| isPay | 是否显示支付键盘 | Boolean | false |
| payTitle | 支付标题 | String | 请输入支付密码 |
事件
| Function Name | Description |
|---|---|
| pasEnd | 密码输入完毕 |
| close | 关闭键盘 |
好了 我们的静态页面大致完成了, 输完6位号码自动验证 进行下一步动作
这里移动端的1px用了我之前写的一个十分简单的class，至于其他逻辑可看源码,由于时间紧迫,代码方面我们往后再说，至此 我们基本完成开发 开始效果调试
在app.vue中写一个简单的按钮用于唤起支付键盘
并且在main.js中导入vuePayKeyboard 插件
我们先暂时这么写 因为还未发布到npm
import vuePayKeyboard from './lib/index.js'
Vue.use(vuePayKeyboard)
在app.vue中注册事件并使用插件
<button @click="payShow()">点击支付</button>
// 直接使用
<vue-pay-keyboard :isPay='isPay' @pasEnd='pasEnd' @close='isPay=false'></vue-pay-keyboard>
可以看到演示效果如下：
呼 ~ 至此 我们所有开发都完成了 前面都是大家熟悉的 现在进入打包以及发布 也都是几分钟的事情.
修改 weppack.config.js 部分配置
module.exports = {
// entry: './src/main.js', // 项目入口 我们通过npm run dev 就是从这里进去的 我们通过run build 打包编译也是
// 因为我们要打包的插件在lib里面 所以稍稍改一下
entry: './src/lib/index.js', // 注释掉原有的 注意 我们打包的时候一定不要把vue也打包进去
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js' // 打包后输出的文件名
filename: 'vue-pay-keyboard.js' // 我们可不想打包后叫build.js 多low啊 起一个与项目相对应的
library: 'PayKeyboard', // library指定的就是你使用require时的模块名，这里便是require("PayKeyboard")
libraryTarget: 'umd', //libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
},
ok 通过 npm run build 打包一次
此时可以看到生成了一个dist文件里面并且有两个文件 一个vue-pay-keyboard.js与一个map文件
我们已经打包完成 先在index.html试一试是否可以通过直接导入script标签的方式使用
此时我们需要先把index.html里面默认导入build.js文件改成我们打包之后的文件名称 并且需要导入vue
此时并没有我们想象的那么顺利 报错了..
报错的原因是我们并没注入vue-pay-keyboard 因为直接用标签的方式 我们并不可能使用use
修改index.js文件
...
// 新增
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(paykeyboard);
}
...
再次打包 可以看到已经成功了
最后发布npm 最重要的是我们需要先修改package.json文件
private:false, // 默认是true 私人的 需要改为false 不然发不上去 你可以试试..
"license": "MIT", // 许可证
"main": "dist/vue-pay-keyboard.js", // 这个超级重要 决定了你 import xxx from “vue-pay-keyboard” 它默认就会去找 dist下的vue-pay-keyboard 文件
"files": [ // 用于发布忽略 当我们的包够复杂的时候 我们总不能把所有本地开发或者测试的组件全部都发布上去 这个时候我们开启这个选项 意为只发布这两个文件 当然我们这个包比较简单 就不开启了
"dist",
"src"
],
"repository": {
"type": "git",
"url": "https://github.com/yucccc/vue-pay-keyboard"
}, // 配置这个地址存放你项目在github上的位置 也尤为重要
OK 一切搞定 发布npm吧 哦 记得写一下readme
注册好npm后 添加用户
npm adduser
Username: your name
Password: your password
Email: yourmail[@gmail](/user/gmail).com
因为我这边已经添加过了 没办法演示 接着
npm whoami // 看一看你是谁..
没问题
npm login // 登陆
npm publish // 发布
这里需要注意的是 如果你使用了淘宝的镜像源，也会导致发布失败，需要切换到npm镜像 推荐使用nrm 这里不展开
报了一个错,说了这么久 我自己却忘了把私人改为 false.
OK 我们发布成功.试一试能不能下载并且引用先.(有时候可能会存在延时或者缓存)
然后再尝试通过 npm 下载来看看否使用吧 ~~
我们通过安装依赖
npm install vue-pay-keyboard -S
正常导入之后可能会发现找不到vue-pay-keyboard 这个模块.
原因是我们的忽略文件默认忽略了 dist 文件
修改 .gitignore 去掉忽略dist
这里注意 每次上到npm上需要更改版本号，不然也会错误
总结:
vue插件的大致思路其实都是这样.
你也赶快来开发属于你的第一个vue插件吧.
如果觉得对你有帮助 希望能给我一个小小的start vue-pay-keyboard
如有错误与纰漏,十分感谢您的指出
至于插件的更加可用性,后期有时间会修改.
感谢您看到最后！
