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 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
js仿淘宝放大镜效果
Dec 28 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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
前端微信支付js代码
2016/07/25 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python生成器的使用方法和示例代码
2019/03/04 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
怎么处理XML的中文问题
2015/03/26 面试题
2014年圣诞节寄语
2014/12/08 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
2019个人半年工作总结
2019/06/21 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
使用Django框架创建项目
2022/06/10 Python
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技