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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
详解如何在Canvas中添加事件的方法
Apr 17 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
php adodb介绍
2009/03/19 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Python实现井字棋小游戏
2020/03/09 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
小学生一分钟演讲稿
2014/08/26 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
2015年团支书工作总结
2015/04/03 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
Python办公自动化之Excel(中)
2021/05/24 Python
Flask搭建一个API服务器的步骤
2021/05/28 Python