Vue插件从封装到发布的完整步骤记录


Posted in Javascript onFebruary 28, 2019

插件的分类

  • 添加全局的方法或者属性 比如:vue-element
  • 添加全局的资源 比如:指令 v-bind
  • 通过mixin方法添加的一些混合
  • 添加Vue实例方法 Vue.prototype上面

插件的使用

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
 //... options
})```

也可以传入一个选项对象:
``` javascript
Vue.use(MyPlugin, { someOption: true })

插件开发

Vue.js 的插件有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:

MyPlugin.install = function (Vue, options) {
 // 1. 添加全局方法或属性
 Vue.myGlobalMethod = function () {
 // 逻辑...
 }

 // 2. 添加全局资源
 Vue.directive('my-directive', {
 bind (el, binding, vnode, oldVnode) {
  // 逻辑...
 }
 ...
 })

 // 3. 注入组件
 Vue.mixin({
 created: function () {
  // 逻辑...
 }
 ...
 })

 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (methodOptions) {
 // 逻辑...
 }

 //5.直接注册组件
 Vue.use();
}

其实无论采用什么方式,最终的目的则是在项目中可以使用,借助install 的Vue参数具体自己进行封装

从零开始的组件封装

需求: 封装一个微博表情的enoji插件

准备

node环境 vue环境 vue-cli脚手架 等等

创建工程

使用vue init 创建简单脚手架,简单修改就可以适合插件开发

vue init webpack-simple weibo-emoji
cd weibo-emoji
npm install

开发目录如下:

Vue插件从封装到发布的完整步骤记录

插件实现

项目具体逻辑实现可以去这里查看源码

我们正常webpack的entry入口一般会设置为main.js 做一些依赖引入和视图挂载等的操作,当我们编写插件的时候理所当然的就会省去挂载这一步操作了。

这里我们可以将index.js作为我们的入口文件,暴露出去的则是一个有这install方法的插件对象

代码如下:

import weiboEmoji from './compontent/weibo_emoji'
const emoji = {
 install(Vue, options) {
  Vue.component(weiboEmoji.name, weiboEmoji);
 }
}
if (typeof window !== 'undefined' && window.Vue) {
 window.Vue.use(emoji);
}
export default emoji

发布

发布之前检查一下webconfig配置:

entry: './src/index.js',// 入口
 output: {
  path: path.resolve(__dirname, './dist'),//打包输出目录
  publicPath: '/dist/',// 静态资源前缀
  filename: 'vue-weibo-emoji.js', //打包生成文件的名字
  library: 'WeiboEmoji', //umd 打包的时候模块的名字
  libraryTarget: 'umd',//打包方式 amd
  umdNamedDefine: true //打包未定义的时候使用默认名字
 },

检查发布配置:

"name": "weibo-emoji", // 打包的项目名,也就是modemodules里面的文件夹名字 也就是import from之后跟的名字
 "main": "dist/vue-weibo-emoji.js", // 是访问到nodemodules依赖,实际引入的文件 相当于入口
 "repository": {// 仓库 貌似仓库内容也不影响发布内容,填对就行
  "type": "git",
  "url": "https://github.com/icebluesky2666/weibo-emoji"
 },
 "description": "A Weibo emoji plugn",// 描述
 "version": "1.0.2",// 版本
 "author": "jhqin",// 作者
 "license": "MIT",// license 类型

对于多次发布,必须每次的版本号都不同

最后:

npm build
 npm login
 npm publish

使用

import WeiboEmoji from 'weibo-emoji'
Vue.use(WeiboEmoji)
<weibo-emoji class="emoji" :weiboIcon="weiboIcon" @changeEmoji="selsctEmoji = arguments[0].phrase" ref="emoji"> </weibo-emoji>

效果:

Vue插件从封装到发布的完整步骤记录

源码

Weibo-Emoji (本地下载)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
详解Javascript实践中的命令模式
May 05 Javascript
Javascript删除数组里的某个元素
Feb 28 #Javascript
vue强制刷新组件的方法示例
Feb 28 #Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 #Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
Vue多组件仓库开发与发布详解
Feb 28 #Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 #Javascript
vue-cli3+typescript初体验小结
Feb 28 #Javascript
You might like
一个改进的UBB类
2006/10/09 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
让python json encode datetime类型
2010/12/28 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
python决策树之C4.5算法详解
2017/12/20 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python面向对象 反射原理解析
2019/08/12 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
Python torch.flatten()函数案例详解
2021/08/30 Python