Vue设置自定义插件

首先要新建插件目录，新建插件文件
在我这里是放在 src 的目录下，新建了一message.js文件

目录如图所示：

image.png

编辑message.js插件文件：

export default {
    install(Vue, options) {
        //设置属性和方法
        const ShowMessage = (res) => {
        console.log("设置啦自定义插件方法:"+res)
        }
        const content = {
            count : 1,
            str:"自定义插件的属性",
            type:"string",
        }
        //添加全局混入
        Vue.mixin({
            mounted(){
                console.log("这里设置全局混入,这会在每个组件的mounted生命周期里面")
            }
        })

        //添加全局指令
        Vue.directive('bg',{
            inserted:function(e){
                e.style.background="red"
            }
        })

//把新建的方法和属性绑定到全局
   Vue.ShowMessage = Vue.prototype.$ShowMessage = ShowMessage
   Vue.content = Vue.prototype.$content = content
    }
}

在main.js里面引入，然后use()方法即可

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index.js'
//先import引入
import message from '../src/plugins/message'
//然后使用use()方法
Vue.use(message)
new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

在组件中使用

<template>
  <div class="wrap">
  //使用v-bg指令，检测效果
    <div v-bg>自定义指令设置背景颜色</div>
    <button @click="getplugin">使用自定义插件</button>
   
  </div>
</template>
<script>
export default {
  name: "index",
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
//设置getplugin方法
    getplugin(){
    console.log(this.$content)  
    console.log(this.$ShowMessage('ok'))
    },
  }

结果如图所示

image.png