开发一个Vue插件

时间: 2020-02-09阅读: 900标签: 插件

前言

vue 项目开发过程中,经常用到插件,比如原生插件 vue-router、vuex,还有 element-ui 提供的 notify、message 等等。这些插件让我们的开发变得更简单更高效。那么 Vue 插件是怎么开发的呢?如何自己开发一个 Vue 插件然后打包发布到npm

本文涉及技术点:

  1. Vue 插件的本质
  2. Vue.extend() 全局方法
  3. 如何手动挂载 Vue 实例
  4. Vue.use() 的原理
  5. 如何打包成 umd 格式
  6. 发布前如何测试 npm 包


一、定义

什么是Vue插件,它和Vue组件有什么区别?来看一下官网的解释:

“插件通常用来为 Vue 添加全局功能。”
“组件是可复用的 Vue 实例,且带有一个名字。”
—— Vue.js 官网

Emmmm,似乎好像有种朦胧美。。。

我来尝试解释一下,其实, Vue 插件 和 Vue组件 只是在 Vue.js 中包装的两个概念而已,不管是插件还是组件,最终目的都是为了实现逻辑复用。它们的本质都是对代码逻辑的封装,只是封装方式不同而已。在必要时,组件也可以封装成插件,插件也可以改写成组件,就看实际哪种封装更方便使用了。

除此之外,插件是全局的,组件可以全局注册也可以局部注册。

我们今天只聚焦 Vue 插件。

插件一般有下面几种:

  • 添加全局方法或者属性。如: vue-custom-element
  • 添加全局资源:指令/过滤器/过渡等。如 vue-touch
  • 通过全局混入来添加一些组件选项。如 vue-router
  • 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  • 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

—— Vue.js 官网


二、插件的使用

插件需要通过 Vue.use() 方法注册到全局,并且需要在调用 new Vue() 启动应用之前完成。之后在其他 Vue 实例里面就可以通过 this.$xxx 来调用插件中提供的 API 了。

下面以实现一个简易的提示框插件 toast 为例,给大家介绍怎么一步一步开发和发布一个 Vue 插件。

希望达到的效果:
在 main.js 中 use:

// src/main.js
import Vue from 'vue'
import toast from '@champyin/toast'

Vue.use(toast)

在 App.vue 的生命周期 mounted 方法里调用 this.$toast():

// src/App.vue
<template>
 <div>
   <button @click='handleClick'>Toast</button>
 </div>
</template>
<script>
export default {
    name: 'demo',
    methods: {
      handleClick() {
      this.$toast({
        type: 'success',
        msg: '成功',
        duration: 3
      })
    }
  }
}
</script>

运行后在页面上点击按钮,弹出 成功 的提示,然后3秒后消失。


在线体验地址:http://champyin.com/toast/


三、插件开发

1. 编写 toast 的本体。

在 Vue 项目(你可以使用 Vue-cli 快速生成一个 Vue 项目,也可以自己用 webpack 搭建一个)的 src 目录下创建 components/Toast/index.vue 文件。

// src/components/Toast/index.vue
<template>
  <transition name='fade'>
    <div class='uco-toast' v-if='isShow'>
      <span :class='iconstyle'></span>
      <span>{{msg}}</span>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      type: 'success',
      msg: '成功',
      duration: 1,
    };
  },
  computed: {
    iconstyle() {
      return `tfont icon-${this.type} toast-icon`;
    },
  },
  mounted() {
    this.isShow = true;
    setTimeout(() => {
      this.isShow = false;
    }, this.duration * 1000);
  },
};
</script>

<style lang='less' scoped>
// 样式略
</style>

现在 toast 本体完成了,但是它里面的数据目前没法改变,因为我没有给它定义 props 属性。这不是 bug,而是,插件并不是通过 pops 来传值的。

2. 手动挂载 toast 实例的 dom

为了给插件传值,可以利用基础 Vue 构造器 Vue.extend() 创建一个“子类”。这个子类相当于一个继承了 Vue 的 Toast 构造器。然后在 new 这个构造函数的时候,给 Toast 的 data 属性传值,然后手动调用这个实例的 $mount() 方法手动挂载,最后使用原生JS的 appendChild 将真实 DOM (通过实例上的 $el 属性获取)添加到 body 上。

在 src 目录下新建 components/Toast/index.js 文件:

// src/components/Toast/index.js
import Vue from 'vue';
import Toast from './index.vue';

// 使用 Vue.extend() 创建 Toast 的构造器
const ToastConstructor = Vue.extend(Toast);

const toast = function(options = {}) {
    // 创建 Toast 实例,通过构造函数传参,
    // 并调用 Vue 实例上的 $mount() 手动挂载
    const toastInstance = new ToastConstructor({
        data: options
    }).$mount();

    // 手动把真实 dom 挂到 html 的 body 上
    document.body.appendChild(toastInstance.$el);

    return toastInstance;
};

// 导出包装好的 toast 方法
export default toast;

3. 暴露 install 方法给 Vue.use() 使用。

为了支持 Vue.use(),Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。
—— Vue.js 官网

通过 Vue.js 源码也可以看出,Vue.use() 方法所做的事情就是调用插件或者组件的 install 方法,然后把全局 Vue 传进去供插件和组件使用。

// https://github.com/vuejs/vue/blob/dev/src/core/global-api/use.js
/* @flow */

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

在 src 目录下新建 components/index.js 文件,定义一个 install 方法,在里面将 toast 实例放到 Vue.prototype 上作为 Vue 实例的方法暴露到全局。

// src/components/index.js
import toast from './Toast/index';
import '../icon/iconfont.css';

// 准备好 install 方法 给 Vue.use() 使用
const install = function (Vue) {
  if (install.installed) return;
  install.installed = true;

  // 将包装好的 toast 挂到Vue的原型上,作为 Vue 实例上的方法
  Vue.prototype.$toast = toast;
}

// 默认导出 install
export default {
  install,
};

现在插件就开发完成了,可以在当前项目中本地引用这个插件了。

//在 main.js 中
import toast from src/components/index.js;
Vue.use(toast);

//在 App.vue 中
handleClick(){
  this.$toast();
}


四、发布到npm

为了方便其他人也可以使用到这个插件,我们可以把它发布到 npm 上去。发布的步骤很简单,但是发布之前,需要有一些小配置和一些注意的地方。

1. 打包配置

首先我们要把它打包成可以给浏览器解析的 UMD 格式的的模块,并且去掉对 Vue.js 的打包,这样别人在 Vue 项目中使用这个插件的时候就不会有两份 Vue 或者出现 Vue 版本冲突的问题,以保证可以更好被独立引用。

如果你是用 Vue-cli 生成的项目,那只需要在你的 npm 脚本中配置一下库的打包命令:

// package.json
"build:lib": "vue-cli-service build --target lib --name toast --dest lib  src/components/index.js"

命令说明:

--target:构建的目标
          targetType 有三个选项:lib | wc | wc-async
          lib:库
          wc:web component
          wc-async:异步的 web component

--name:库或组件的名字
          当入口为单一文件时,name为库或组件的文件名
          当入口为global表达式时,name为每个库或组件文件名字的前缀

[entry]:打包入口
          可以是.vue文件,也可以是.js文件
          当注册多个web component时,入口可以是一个global表达式,如 components/*.vue

--dest:输出目录
          默认为dist目录,也可以修改为自定义的目录

然后运行 npm run build:lib,即可在 lib 目录下生成如下文件:

toast.umd.js 一个直接给浏览器或者AMD loader 使用的 UMD 包
toast.umd.min.js 一个压缩版 UMD 构建版本
toast.common.js 一个给打包器用的CommonJS包

如果你是用 webpack 搭建的 Vue 项目,那就需要在 webpck 中配置一下 output.libraryTarget 等属性:

// build/webpack.lib.conf.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/components/index.js',
  output: {
    path: path.resolve(__dirname, '../lib'),
    filename: 'toast.js',
    library: 'toast',
    libraryTarget: 'umd',
    libraryExport: 'default',
    umdNamedDefine: true,
    globalObject: 'typeof self !== \'undefined\' ? self : this',
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue',
    },
  },
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

然后运行 npm run build:lib,即可在 lib 目录下生成如下文件:

toast.js 直接给浏览器或者AMD loader 使用的 UMD 包

2. 发布前的测试

发布前,我们需要配置一下 package.json 里的 name 和 main 字段:
name 的值是最终包的名字,install 和 import 的就是这个名字(请确保全网唯一)。
main 的值是包的入口文件路径(相对当前文件的路径),一定要填写正确,否则包无法被引用。

"name": "@champyin/toast",
"main": "lib/toast.js",

为了确保包的配置没有问题,我们可以利用 npm link 命令在本地测试一下包的使用情况。使用npm link测试包的使用估计很多人都会,就不赘述了。如果有需要可以看我的另一篇中文章npm link详解

这个时候,我们其实就可以发布了,但是为了防止把不必要的文件发布出去(比如测试用例和demo)浪费人家下载的流量,我们最好是建一个 .npmigore 文件,语法跟 .gitignore 相同。

3. 发布

发布的方法很简单(不过首先你要有个 npm 账号),在 package.json 所在的目录下执行这两句就可以了:

npm add user
npm publish

关于更详细的发布教程,我在另一篇文章有专门细说:如何发布一个npm模块

4. 安装测试

其实到了这一步一99.99%是不会出错了,安装一遍只是为了那 0.01% 的万一。

在另一个 Vue 项目里(注意不能在开发toast的项目里哈),从 npm 安装自己刚才发布的包:

npm i -D @champyin/toast

然后在项目中使用一下自己的插件,点击按钮就会弹出 toast 小提示了。

//在 main.js 中
import toast from '@champyin/toast';
Vue.use(toast);

//在 App.vue 中
handleClick(){
  this.$toast();
}
项目体验地址:http://champyin.com/toast/
npm 地址:https://www.npmjs.com/package/@champyin/toast
欢迎给我提 issue:https://github.com/yc111/toast/issues

文章同时发表于公众号「前端手札」,喜欢的话可以关注一下哦。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/8132

Pushbar.js带模糊效果的隐藏滑动侧边栏插件

Pushbar.js是一个小巧的Javascript插件,它可以用于在Web应用程序中创建滑动侧边栏效果,还提供模糊效果,就像开关抽屉的效果。你可以完全定制效果,它不依赖任何第三方库,你可以使用它作为侧栏菜单或者操作选项滑出效果。

实现一个vue-router插件

要想自己实现一个vue-router插件,就必须先了解一下vue-router插件的基本使用,我们在使用vue-router的时候,通常会定义一个router.js文件,里面主要就是干了以下几件事:

ios风格的时间选择插件

在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue

EXIF.Js读取图片的EXIF信息

EXIF(Exchangeable Image File)是“可交换图像文件”的缩写,当中包含了专门为数码相机的照片而定制的元数据,可以记录数码照片的拍摄参数、缩略图及其他属性信息,简单来说,Exif信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数

Vue3 插件开发详解

vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体却很诚实地创建一个vue3的项目,兴致勃勃地引入 vue2 插件的时候

webpack插件ProvidePlugin的使用方法和eslint配置

配置 webpack.config.js文件里 plugins 属性,配置完以后就可以在代码里直接使用 _ ,而不再需要 import; 注意:(如果不配置eslint,浏览器就会报错:\\\'_\\\' is not defined no-undef)

分享 10 个超实用的 Chrome 扩展

CSSViewer这个工具在识别和显示元素的CSS属性方面很有用。它包括一个浮动窗口,您可以把鼠标悬停在页面上任一元素上以查看它的所有CSS属性。您可以通过快捷键在CSSViewer的窗体中轻松复制您选定元素的样式。

10款好用到爆的Vim插件

我使用Vim编辑器已经差不多20年了,不过,我是在前两年才开始使用Vim插件,我会定时清理插件,我认为这样做更有助于自己了解哪些插件才是最好的。此外,针对不同的语言和文件配置我会使用不同的插件

怎样设计一个 JavaScript 插件系统

不管是 jQuery、 Vue 还是 React,它们都支持插件。插件是库和框架中很常见的功能,并且有一个充分的理由:它们允许开发人员以安全、可扩展的方式添加新的功能

对于前端开发,整理推荐好用的chrome插件或应用

向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!