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 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
angular异步验证器防抖实例详解
Mar 31 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防止post重复提交数据的简单例子
2014/06/07 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
医药专业应届毕业生求职信范文
2014/01/01 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
培训通知书模板
2015/04/17 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python