10分钟教你快速开发一个vue插件并发布npm

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

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

请用手机或者电脑仿真查看 vuepayboard

关于vue插件

插件一般都有如下几种形式导入

ES6
import vuePayKeyboard from 'vue-pay-keyboard'

//  通过require 导入
var vuePayKeyboard = require('vuePayKeyboard')

// 通过use挂载
Vue.use(vuePayKeyboard)

// 或者直接导入js文件
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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 可以说基本的开发环境我们已经搭建完成了...你们信吗？
接下来我们写键盘的业务逻辑 会相对复杂，这里根于不同的业务需求，会有不同的解决方案，但是有些东西都是相通的.

如何写好一个组件

我认为通常一个好的插件 首要的是解决用户的问题,其次在有必要的情况下再进行个别案例的解决,通常需要如下：

• 通用性 // 能够满足大部分用户需求
• 可订制性 // 能够满足用户针对不同业务环境进行订制
• 可扩展性 // 能够满足用户对其他方面的拓展

我们先简单的写下样式 我尽量写的像支付宝的样式哈。。。
同时对外开放几个属性和方法

可传属性

事件

好了 我们的静态页面大致完成了, 输完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', // 注释掉原有的
  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 文件
  "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 // 发布

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

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

npm install vue-pay-keyboard -S 

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

总结:

vue插件的大致思路其实都是这样.
你也赶快来开发属于你的第一个vue插件吧.