Vue 插件开发与发布

写在前面

本次演示的是开发一个 vue手机虚拟支付键盘插件
主要讲解的是如何快速开发一个vue插件并发布到npm上

源码地址

所有代码都可以在我的GitHub vue-pay-keyboard 上查看,

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>

可以看到演示效果如下：

demo.gif

呼 ~ 至此我们所有开发都完成了前面都是大家熟悉的现在进入打包以及发布也都是几分钟的事情. 修改 weppack.config.js 部分配置

module.exports = {
 // entry: './src/main.js',  // 项目入口 我们通过npm run dev 就是从这里进去的 我们通过run build 打包编译也是
  // 因为我们要打包的插件在lib里面 所以稍稍改一下
   entry: './src/lib/index.js', // 注释掉原有的
  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
此时并没有我们想象的那么顺利报错了..

image.png

报错的原因是我们并没注入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 文件
  "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 // 发布

image.png

报了一个错,说了这么久我自己却忘了把私人改为 false.

image.png

OK 我们发布成功.试一试能不能下载并且引用先.(有时候可能会存在延时或者缓存)
然后再尝试通过 npm 下载来看看否使用吧 ~~
我们通过安装依赖

npm install vue-pay-keyboard -S

正常导入之后可能会发现找不到vue-pay-keyboard 这个模块.
原因是我们的忽略文件默认忽略了 dist 文件
修改 .gitignore 去掉忽略dist
这里注意每次上到npm上需要更改版本号，不然也会错误

总结:

vue插件的大致思路其实都是这样.
你也赶快来开发属于你的第一个vue插件吧.
如果觉得对你有帮助希望能给我一个小小的start vue-pay-keyboard
如有错误与纰漏,十分感谢您的指出
至于插件的更加可用性,后期有时间会修改.
感谢您看到最后！