【vue】插件

2021-12-02 本文已影响0人嘻洋洋

1.基本用法

1.1 作用

插件通常用来为 Vue 添加全局功能，所谓全局即不需要像组件那样，每次使用他前都需要先引入一次。对于插件只要在最开始引入一次，在任何组件就可以直接使用。（类似于我们在window上添加的方法属性那样，任何地方都可以用）
下面几种常见的用途：

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

1.1 使用方式

主要两种使用方式
一：全局引入方式
（1）使用步骤
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
  // ...组件选项
})

也可以传入一个可选的选项对象：

Vue.use(MyPlugin, { someOption: true })

（2）在main.js中配置
比如：使用element-ui为例：

import Vue from 'vue'
import {
  Button,
  Radio,
  RadioGroup,
  Checkbox,
  ......
} from 'element-ui'

Vue.use(Button)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Checkbox)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$ELEMENT = { size: 'medium' }

组使用件中

<template>
    <div>
      <el-button type="danger">危险按钮</el-button>
    </div> 
</template>

二：组件引入方式
比如，以使用 swiper为例

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  }
}

组件中使用

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      swiperOption:{
      //这里配置的参数参考官网API设置，这里的pagination就是下图中的官方配置
        pagination: {
          el: '.swiper-pagination',
        }
      }
    }
  }
}
</script>

2.开发插件

vue插件其实就是一个简单的js对象而已，然后这个插件对象有一个公开属性 install ，他的值为一个函数，此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。
一：开发插件有四种方法

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

二：添加实例方法
其中最常用的：【4. 添加实例方法】的写法和使用方法，下面举例说明toast 最简单插件开发过：
（1）新建一个plugin目录，编辑插件toast.js文件

image.png

// toast插件
var Toast = {}
Toast.install = function (Vue, options) {
  Vue.prototype.$msg = 'Hello World'
}
module.exports = Toast

（2）在 main.js 中，需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件

import Vue from 'vue'
import App from './App'
import router from './router'
// 全局引入插件
import Toast from './plugin/toast'
Vue.use(Toast)

（3）我们在组件中来获取该插件定义的 $msg 属性，比如在根组件App.vue中

export default {
  name: 'App',
  mounted () {
    // 调用toast
    console.log(this.$msg) //
  }
}

控制台输出：Hello World
三：添加全局资源
这里主要介绍过滤器
（1）在plugin目录新建插件filter.js文件

/*
 *@description:格式化金额
*/
var filter = {}
filter.install = function (Vue, num) {
  // 时间格式化过滤器，输入内容是number或者Date对象，输出是YYYY-MM-DD HH-MM-SS
  Vue.filter('moneyFormart', function (num) {
    num = parseFloat((num + '').replace(/[^\d\.-]/g, '')).toFixed(2) + ''
    let Integ = num.split('.')[0].split('').reverse()
    let deci = num.split('.')[1]
    let space = ''
    for (let i = 0; i < Integ.length; i++) {
      space += Integ[i] + ((i + 1) % 3 === 0 && (i + 1) !== Integ.length ? ',' : '')
    }
    return space.split('').reverse().join('') + '.' + deci
  })
}
module.exports = filter

（2）在 main.js 中，需要导入 filter.js 并且通过全局方法 Vue.use() 来使用插件

// 全局引入插件
import Toast from './plugin/toast'
import filter from './plugin/filter'
Vue.use(Toast)
Vue.use(filter)

（3）HelloWorld.vue页面上使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Hello World</h2>
    <h2>{{ price | moneyFormart }}</h2>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      price: '12.37699'
    }
  }
}
</script>

image.png

添加全局资源也可以不放在插件里面实现，可以直接在main.js入口文件创建Vue实例前添加：

//挂载指令
Vue.directive('noMoreClick', {
  inserted(el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-disabled')
      el.disabled = true
      setTimeout(() => {
        el.disabled = false
        el.classList.remove('is-disabled')
      }, 3000)
    })
  }
})

// 挂载全局
Vue.prototype.$http = httpRequest // ajax请求对象
Vue.prototype.$Moment = moment // 时间
Vue.prototype.isAuth = isAuth // 权限方法
Vue.prototype.$md5 = md5

其他组件就可以通过this直接使用:

 this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              clearLoginInfo()
              this.$router.push({ name: 'login' })
            }
          })

3. 组件和插件的区别

（1）核心区别

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue。
插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身。

简单来说，插件就是指对Vue的功能的增强或补充。
（2）其他区别

组件的使用频率往往大于插件
组件的作用范围往往小于插件
插件可以封装组件，组件可以暴露数据给插件

一个Vue插件可以是一堆Vue组件的集合（插件干的事就是把内部的组件帮你倒入到vue全局下），也可以是用来扩展Vue功能的，比如 Vuex， Vue-Router。

4. 打包到npm

测试完成，下面就要把的内容打包发布到npm 上去,具体步骤可以参照
https://www.cnblogs.com/adouwt/p/9211003.html