https://blog.csdn.net/u010730897/article/details/54972417
https://www.imooc.com/article/19691
https://blog.csdn.net/luckylqh/article/details/54025356 vue中自定义组件（插件）
https://www.jb51.net/article/135324.htm Vue 创建组件的两种方法小结(必看)
plug.js:
const plug = {------------------>// 定义一个对象
install(Vue, options){------>包含我们需要处理的业务：
第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:
}}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(plug);
}
export default plug-------------->// 导出这个对象
那么此时我们就可以通过 use的方式来使用:
import plug from 'plug'
Vue.use(plug)------------>此时plug暴露给我们的 就是 install 函数定义的方法及属性
案例一：
开发插件：
components\devIndxNav\devIndxNav.vue
<template> <div class="dev-nav-wrap"> <router-link :to="{name: 'writeQuestion'}"> <img v-bind:src="contactXWIcon"/> </router-link> </div> </template> <style lang="less"> .dev-nav-wrap{ z-index: 10; position:fixed; bottom:30px; right:30px; opacity:0.8; img{ width: 65px; height: 64px; } } @media only screen and (min-width: 500px) { .dev-nav-wrap{ z-index: 10; position:fixed; bottom:30px; right:30px; opacity:0.8; } } </style> <script> export default { name: 'devIndxNavLd', data () { return { contactXWIcon: 'static/img/[email protected]' } } } </script>
components\devIndxNav\index.js
import devIndxNav from './devIndxNav.vue' // 导入组件 const indxNav = { install (Vue, options) { Vue.component(devIndxNav.name, devIndxNav) // vuePayKeyboard.name 组件的name属性 // 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已 // Vue.prototype.$xxx // 最终可以在任何地方通过 this.$xxx 调用 // 虽然没有明确规定用$开头 但是大家都默认遵守这个规定 } } if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(indxNav) } export default indxNav // 导出..使用插件：
main.js:
import indxNav from './components/devIndxNav/index' Vue.use(indxNav)
mainPage.vue： 使用插件的页面------->使用插件的name属性（使用main.js中的名称发现不识别）
<dev-indx-nav-ld></dev-indx-nav-ld>
案例二：
开发插件：
E:\nodeWork\vue-message-Plugins\src\Plugins\loading\loading.js：
import Vue from 'vue'
import Main from './loading.vue'------------------》引入vue组件
let LoadingConstructor = Vue.extend(Main)---------》// 创建构造器 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
let instance
const Loading = function (options) {
options = options || {}
options = {
state: options.state
}
instance = new LoadingConstructor({----------构造函数创建一个子类，子组件
data: options
})
instance.vm = instance.$mount()--------------mount到页面
let isNode = document.querySelector('.loading')
if (!isNode) {
document.body.appendChild(instance.vm.$el)------》不存在，就追加到document
} else {
document.body.removeChild(isNode)--------------->已经存在，remove掉
}
}
Vue.prototype.$loading = Loading--------------------全局vue $属性
export default Loading
E:\nodeWork\vue-message-Plugins\src\Plugins\index.js：
import Loading from './loading/loading'
import Dialog from './dialog/dialog'
export {
Loading,
Dialog
}
使用插件：
E:\nodeWork\vue-message-Plugins\src\main.js：
import { Loading, Dialog } from './Plugins/index'
Vue.use(Loading)
Vue.use(Dialog)
E:\nodeWork\vue-message-Plugins\src\components\HelloWorld.vue：
methods: {
showloading () {
this.$loading({
state: true
})
setTimeout(() => {
this.$loading({
state: false
})
console.log('loading')
}, 2000)
},
showdialog () {
this.$dialog({
state: true,
title: '测试dialog插件',
message: '测试测试测试。。。哈哈哈。。就是测试一下啦'
})
}
}
创建组件的两种方法小结
1.全局注册
2.局部注册
|
1
2
|
var child=Vue.extend({})
var parent=Vue.extend({})
|
Vue.extend() 全局方法 生成构造器，创建子类
使用基础 Vue 构造器，创建一个“子类”。
这样写非常繁琐。于是vue进行了简化
使用Vue.component()直接创建和注册组件：
Vue.component(id,options) 全局方法 用来注册全局组件
id 是string类型，即是注册组件的名称
options 是个对象
|
1
2
3
4
5
6
7
|
// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
template: '<
div
>This is the first component!</
div
>'
})
var vm1 = new Vue({
el: '#app1'
})
|
Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。
使用这种方式，Vue在背后会自动地调用Vue.extend()。
10分钟教你快速开发一个vue插件并发布npm
本次演示的是开发一个 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', // 注释掉原有的
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插件吧.