背景

项目中用到element-ui,里面用到了弹出组件,但是效果不太满意,于是自己就想写一个简单的弹出组件。目前已经发布到npm:可以通过npm i dialog-wxy -s 进行下载使用
页面调用效果:在线查看

实现步骤

第一步 搭建vue简单工程

vue init webpack-simple dialog-wxy

创建好工程,在src 同层目录 新建文件夹 lib 用来编写源码:如图:

开始code 插件

插件写法,具体参考 https://cn.vuejs.org/v2/guide...
这里
我们最终暴露出来的:

export default {
install (Vue, options) {
Vue.prototype.$alert = Alert
}
}

在 main.js 使用的时候,直接 Vue.use() 就行,这样我们就在vue 的原型链上 增加$alert() 方法,vue文件通过 this.$alert({}),就可以 调用了!
具体插件内部实现可以看 github:插件源码

修改配置文件

修改 webpack.config.js 文件 中对应的 输入, 输出 :

  entry: './lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'dialog-wxy.js',
library: 'dialog-wxy',
libraryTarget: 'umd', // 很重要,保证能通过import 进行引用
umdNamedDefine: true
},

修改package.json
修改这 几处:

  "license": "MIT",
"private": false,
"main": "dist/dialog-wxy.js", private 设为 公共,main 是主入口

发布

设置完 我们就可以 进行发布了,首先 注册npm 账号,然后打开本地git bash
输入npm login: 依据提示: 输入 名称,密码,以及邮箱:
在插件目录,对vue 进行编译: npm run build,
编译完成,进行发布:npm publish

发布成功

在线体验

插件使用效果

开发第一个VUE插件的更多相关文章

  1. 如何开发和发布一个Vue插件

    前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效. ...

  2. 第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...

  3. 从零开始编写一个vue插件

    title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一 ...

  4. 学习如何写一个vue插件【入门篇】

    #### 疑答 1.市面上已经有那么多插件可用,为什么还要造轮子?学习.借鉴思想.应用到开发 2.能否在项目中使用?与网上插件使用相同   更新维护问题怎么解决? 自身动力,使用者反馈等 #### 准 ...

  5. 用webpack发布一个vue插件包

    创建库 本来以为很简单,结果配置了webpack之后,运行build就报错了,似乎不认识es6语法,于是先后安装了几个包: @babel/core @babel/preset-env babel-lo ...

  6. 基于vue框架手写一个notify插件,实现通知功能

    简单编写一个vue插件,当点击时触发notify插件,dom中出现相应内容并且在相应时间之后清除,我们可以在根组件中设定通知内容和延迟消失时间. 1. 基础知识 我们首先初始化一个vue项目,删除不需 ...

  7. 定义了一个vue全局方法,不能再vuex中进行调用

    你把函数定义在 Vue 的原型链上,只能在 Vue 的实例里才能取到这个方法. vue组件 是一个Vue 的实例,所以你当然能在这里调用到 ajax 方法. 而,vuex 只是一个 vue插件,在 v ...

  8. 80行代码教你写一个Webpack插件并发布到npm

    1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...

  9. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

随机推荐

  1. HttpRunnerManager(二)--使用

    参考资料:https://sutune.me/2018/08/05/httprunner/

  2. shell命令find删除修改后带尾巴的重复的文件

    命令:find . -name "*~" -delete 说明:在linux中 点号(.)表示当前目录,连续的连个点号(..)表示父级目录 作用:在linux中,我经常会遇到这样的 ...

  3. 网易云课堂_C++程序设计入门(下)_期末考试_期末考试在线编程题目

    期末考试在线编程题目 返回考试   本次考试题目一共两个,在考试期间可以不限制次数地提交 温馨提示: 1.本次考试属于Online Judge题目,提交后由系统即时判分. 2.学生可以在考试截止时间 ...

  4. 布局复习---BFC

    其实在一开始我是没有BFC的这个概念的,只是知道在浮动过后,后续的元素如果出现问题,就做我们常说的:overflow:hidden.其中的原因还是不甚了解.不是说以前老师没有讲解过,而是以前根本就没有 ...

  5. 如何在 Spring/Spring Boot 中做参数校验

    数据的校验的重要性就不用说了,即使在前端对数据进行校验的情况下,我们还是要对传入后端的数据再进行一遍校验,避免用户绕过浏览器直接通过一些 HTTP 工具直接向后端请求一些违法数据. 本文结合自己在项目 ...

  6. Golang的面向对象编程【结构体、方法、继承、接口】

    Golang也支持面向对象编程.但与以前学过传统的面向对象编程语言有区别.1)Golang没有类class,Go语言的结构体struct和类class有相似的特性.2)Golang中不存在继承,方法重 ...

  7. 论文翻译:HetConv-Heterogeneous Kernel-Based Convolutions for Deep CNNs

    Abstract 我们提出了一种新颖的深度学习架构,其中卷积操作利用了异构内核.与标准卷积运算相比,所提出的HetConv(基于异构内核的卷积)减少了计算(FLOPs)和参数的数量,同时仍保持表示效率 ...

  8. 【嵌入式开发】树莓派+官方摄像头模块+VLC串流实时输出网络视频流

    sudo apt-get update sudo apt-get install vlc sudo raspivid -o - -t 0 -w 640 -h 360 -fps 25|cvlc -vvv ...

  9. 【VS开发】ActiveX控件如何定制属性?

    在很多场合下会存在这样的需求,那就是使用方在实际使用控件之前就想控件已经做了相应的处理比如加载的控件版本不正确等,或者需要在加载时才确定能够使用的功能集:这个时候传统的配置文件已经无法满足这种类型的需 ...

  10. 【转】mysql用sql实现split函数

    关键词:mysql split mysql根据逗号将一行数据拆分成多行数据1.原始数据演示 2.处理结果演示 3.sql语句 SELECT a.id , a.NAME , substring_inde ...