开发第一个VUE插件

VEIGHTZ 发布于2019-08-23 12:03 / 1693人阅读

摘要：背景项目中用到里面用到了弹出组件，但是效果不太满意，于是自己就想写一个简单的弹出组件。

背景

项目中用到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

发布成功

在线体验

插件使用效果

GPU云服务器云服务器 vue插件第一个数据第一个顶级域名 Vue开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97905.html

Vue UI：Vue开发者必不可少的工具

摘要：基于整个开发者社区的反馈而大幅度改良，该版本提供了很多以工作流为中心的工具。我想会提升每一位的开发者工作效率的特性就是。开始首先，我们确保安装了最新的。自从年双十一正式上线，累计处理了亿错误事件，付费客户有金山软件百姓网等众多品牌企业。译者按： Vue开发工具越来越好用了！原文: Vue UI: A First Look 译者: Fundebug 本文采用意译，版权归原作者...

jsyzchen 2019-08-23 16:49 评论0 收藏0
开发第一个VUE插件

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

stdying 2019-08-02 16:06 评论0 收藏0
开发第一个VUE插件

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

Galence 2019-08-30 15:54 评论0 收藏0
Vue 进阶系列（二）之插件原理及实现

摘要：示例输出第一步先不考虑插件，在已有的中是没有这个公共方法的，如果要简单实现的话可以通过钩子函数来，即在里面验证逻辑。按照插件的开发流程，应该有一个公开方法，在里面使用全局的方法添加一些组件选项，方法包含一个钩子函数，在钩子函数中验证。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）showImg(https://segmen...

wuaiqiu 2019-08-23 12:41 评论0 收藏0
浅谈Vue.use

摘要：并且接收的参数的限制是两种类型。对于这两种类型有不同的处理。之后给这个插件添加至已经添加过的插件数组中，标示已经注册过最后返回对象。还有一种则是将所有逻辑都编写成一个函数暴露给。个人觉得第一种方式比较合理。先举个? 我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这...

MingjunYang 2019-08-21 17:55 评论0 收藏0