04 Vue 注册plgins的多种形式

一般在企业开发中的，会会在src文件夹下新建plugin文件夹，专门存放自定义插件 

一 将组件封装成插件

在该文件夹中一个插件的结构

Loading文件夹即一个插件所占空间

• 在index.js中
• 导入封装好的组件
• 使用install方法，在其中进行全局组件注册
• 将该方法暴露出去

Loading.vue 代码如下:

<template>
  <div>插件使用组件的形式注册</div>
</template>

<script>
export default {
 name: 'Loading'
}
</script>

 index.js 代码如下: 导出插件的install 

import Vue from 'vue'
import Loading from './Loading'


export default {
   install(vue){
     Vue.component(Loading.name, Loading)  
    }
}

main.js 代码如下:  vue.use() 挂载插件

import Vue from 'vue'
import App from './App.vue'
import Loading from "./components/Loading"


Vue.config.productionTip = false
Vue.use(Loading)

Vue.方法名 = function(){}
new Vue({
  render: h => h(App),
}).$mount('#app')

loading插件在其他.vue文件使用及效果图：

优点是

• 无需在当前vue页面注册组件Loading组件 
• 目前以组件封装成插件和全局组件的功能基本没区别。

<template>
  <div id="app">
    <button>插件用组件封装</button>
    <Loading></Loading> // 直接使用
  </div>
</template>

 二 为插件传参(待优化)

index.js 

import Vue from 'vue'
import Loading from './Loading'


export default {
  // install(vue){
  //   Vue.component(Loading.name, Loading)  
  // }

  install(Vue, options) {
    console.log(options);
    //根据组件生成构造函数
    let LoadingContructor = Vue.extend(Loading)
    //根据构造函数创建实例对象
    let LoadingInstance = new LoadingContructor()
    //创建一个标签
    let oDiv = document.createElement('div')
   
    //将创建好的标签添加到页面上
    document.body.appendChild(oDiv)
    //将创建好的实例对象挂载到创建好的元素上
    LoadingInstance.$mount(oDiv)
    console.log(LoadingInstance);
    LoadingInstance.title = options.title

    
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import Loading from "./components/Loading"



Vue.config.productionTip = false
Vue.use(Loading, {
  title: 'Hello'
})
Vue.方法名 = function(){}
new Vue({
  render: h => h(App),
}).$mount('#app')

三 封装modal插件 (基于element ui的一些方法)

 modal.js

import { Message, MessageBox, Notification, Loading } from 'element-ui'

let loadingInstance;

export default {
  // 消息提示
  msg(content) {
    Message.info(content)
  },
  // 错误消息
  msgError(content) {
    Message.error(content)
  },
  // 成功消息
  msgSuccess(content) {
    Message.success(content)
  },
  // 警告消息
  msgWarning(content) {
    Message.warning(content)
  },
  // 弹出提示
  alert(content) {
    MessageBox.alert(content, "系统提示")
  },
  // 错误提示
  alertError(content) {
    MessageBox.alert(content, "系统提示", { type: 'error' })
  },
  // 成功提示
  alertSuccess(content) {
    MessageBox.alert(content, "系统提示", { type: 'success' })
  },
  // 警告提示
  alertWarning(content) {
    MessageBox.alert(content, "系统提示", { type: 'warning' })
  },
  // 通知提示
  notify(content) {
    Notification.info(content)
  },
  // 错误通知
  notifyError(content) {
    Notification.error(content);
  },
  // 成功通知
  notifySuccess(content) {
    Notification.success(content)
  },
  // 警告通知
  notifyWarning(content) {
    Notification.warning(content)
  },
  // 确认窗体
  confirm(content) {
    return MessageBox.confirm(content, "系统提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
    })
  },
  // 提交内容
  prompt(content) {
    return MessageBox.prompt(content, "系统提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
    })
  },
  // 打开遮罩层
  loading(content) {
    loadingInstance = Loading.service({
      lock: true,
      text: content,
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    })
  },
  // 关闭遮罩层
  closeLoading() {
    loadingInstance.close();
  }
}

index.js

import modal from './modal'


export default {
  install(Vue) {
    // // 页签操作
    // Vue.prototype.$tab = tab
    // // 认证对象
    // Vue.prototype.$auth = auth
    // // 缓存对象
    // Vue.prototype.$cache = cache
    // 模态框对象
    Vue.prototype.$modal = modal // 挂载全局方法
  }
}

 main.js

import Vue from 'vue'
import App from './App.vue'
import plugins from './plugins' // plugins



Vue.config.productionTip = false

Vue.use(plugins)

Vue.方法名 = function(){}
new Vue({
  render: h => h(App),
}).$mount('#app')

modal插件使用 

<template>
  <div id="app">
   <button @click="open">测试plugins model</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      params: {
        nickName: 'admin',
        password: 'PIQTWjlKhxoG73CXygWCgw=='
      }
     
    }
  },
  components: {
    HelloWorld
  },
  mounted() {
  },
  methods: {	
    open() {
      this.$modal.msgSuccess('123')
      this.$modal.notify('信息')
      this.$modal.loading('遮罩层')
      setTimeout(() => {
        this.$modal.closeLoading('遮罩层')
      }, 1000);
    },
  },
  
</script>

效果图：

 

 

 四 总结

 1. 插件本质上就是一个暴露 install 方法的对象，且install 方法接收的第一个参数是 Vue，第二个可选参数是 options 选项对象

Vue 进阶【2】— plugin（插件编写） - 简书

 2.在 install 方法里可以 

• 添加全局方法 或 prototype

   Vue.myGlobalMethod = function () {
       // 逻辑...
   }

• 添加全局资源

    Vue.directive('my-directive', {
       bind (el, binding, vnode, oldVnode) {
         // 逻辑...
       }
     ...
   })

• 通过 mixin 注入组件选项

   Vue.mixin({
     created: function () {
       // 逻辑...
     }
     ...
   })

• 添加实例方法

 Vue.prototype.$myMethod = function (methodOptions) {
   // 逻辑...
 }

3.通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成