Vue3插件——一文讲透_vue3插件开发

我们平时用vue的时候，肯定经常要去下载一些插件使用，比如说，国际化i18n、md5加密处理等等。那么，如果让我们自己去编写一个插件，应该如何操作呢？

介绍

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

Vue 3 插件可以全局注册、本地注册或在组件内部使用。

Vue 插件通常以可重用的形式提供，可以在任何基于Vue.js应用程序中使用。

官网提供的如何安装一个插件的案例：

import { createApp } from 'vue'
 
const app = createApp({})
 
app.use(myPlugin, {
  /* 可选的选项 */
})

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：

const myPlugin = {
  install(app, options) {
    // 配置此应用
  }
}

我的理解是，插件就是分解出去的模块，可以把项目中某些功能封装出去，这样团队也可以直接用，甚至可以提交到平台，开源了后供其它人使用。

但是插件发挥作用的常见场景主要包括以下几种：

1. 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。

2. 通过 app.provide() 使一个资源可被注入进整个应用。

3. 向 app.config.globalProperties 中添加一些全局实例属性或方法

4. 一个可能上述三种都包含了的功能库 (例如 vue-router)。

很明显，不管是以上的哪一种，都可以说是只要能够分离掉模块，那么运用插件制作的过程就可以得到一个随处可以安装的vue插件，使开发更加简便。

Vue 3 第三方插件

Vue 3 提供了内置组件和功能，使我们能够快速构建现代应用程序。但是，有时我们可能需要使用第三方插件来扩展 Vue 3 的功能。在本文中，我们将介绍 Vue 3 的第三方插件，以及如何使用它们来扩展我们的应用程序。

1 第三方插件简介

第三方插件是 Vue 3 的扩展，可以帮助我们解决许多常见的问题和需求。这些插件通常由社区创建和维护，并且可以在 Vue CLI 的插件管理器中安装。

2 第三方插件的使用

要使用第三方插件，我们首先需要在 Vue CLI 中安装它们。例如，如果要使用 Axios 插件来访问 API 服务，我们可以在 Vue CLI 的配置文件中添加以下命令:

npm install axios

安装完成后，我们可以在 Vue 应用程序中使用 Axios 插件。例如，我们可以在组件中定义一个 axios 实例，并使用它来发送 HTTP 请求:

<template>  
  <div>  
    <button @click="fetchData">Fetch Data</button>  
  </div>  
</template>
 
<script>  
import axios from 'axios';
 
export default {  
  methods: {  
    fetchData() {  
      axios.get('/data').then(response => {  
        // handle success  
      }).catch(error => {  
        // handle error  
      });  
    }  
  }  
};  
</script>

要使用 Axios 插件，我们只需要在组件中定义一个 axios 实例，并使用它来发送 HTTP 请求。我们可以使用 fetchData 方法来发送 GET 请求，并处理响应结果。

3 常用第三方插件介绍

1 Axios

Axios 是一个用于访问 API 服务的 Vue 3 插件。它可以轻松地发送 HTTP 请求，并处理响应结果。我们可以在组件中定义一个 axios 实例，并使用它来发送请求和处理响应结果。

2 Element Plus

Element Plus 是一个用于构建现代 Vue 应用程序的 UI 组件库。它提供了许多常用的 UI 组件，例如按钮、表单、弹窗等。我们可以使用 Element Plus 组件来构建漂亮的应用程序。

3 Lodash

Lodash 是一个用于 JavaScript 的包管理器，它提供了许多常用的函数和对象，例如数组和对象的操作、函数式编程等。我们可以在 Vue 应用程序中使用 Lodash 插件来扩展我们的功能。

Vue插件的类型

全局插件

在Vue 3实例创建之前需要注册，可以通过Vue.use()方法来注册，在整个应用中可通过this.$插件名调用插件的方法或属性。

实例插件

只作用于当前组件实例，使用方法类似 Vue2 的 mixin 注入，但已经被弃用了。替代方式是通过 Compatable API 暴露方法。

组件插件

与Vue2组件生命周期中写在mixins对象数组中相似。 

创建Vue 插件

全局插件

简单的console.log方法，如下：

// plugin.js
export default {
    install: (app, options) => {
        app.config.globalProperties.$myPlugin = () => {
         console.log('This is Vue3 Plugin!')
        }
    }
}

我们这里用了插件的install的方法，install中有两个参数，一个是app（代表当前vue对象本身），一个是options，这个是表示深层次属性（比如用户自己传给插件的值）。

简单的模块如下：
 

export default {
  install: (app, options) => {
    // 在这里编写插件代码
  }
}

在你的项目中的main.js中添加此代码：

import { createApp } from 'vue' 
import App from './App.vue' 
import plugin from './plugin.js' 
 
const app = createApp(App) 
 
app.use(plugin) 
 
app.mount('#app')

当项目运行以后，我们会在浏览器控制台中看见

This is Vue3 Plugin!

这就是全局插件的使用方式

在 main.js 中，我们将 plugin 文件导入，使用Vue 3新的创造者模式方法createApp(),使用app.use(plugin)引入全局插件。

组件插件

loading插件写法

该插件为当前项目使用的，目录结构如下：

1.loading组件

nwd-loading.vue：

<template>
    <div class="nwd-loading" v-show="show">
        <div>{{text}}</div>
    </div>
</template>
 
<script>
    export default {
        props: {
            show: Boolean,
            text: "正在加载中..."
        }
    }
</script> 

2.封装插件

index.js

import NwdLoadingComponent from './nwd-loading'
 
let $vm;
 
export default {
	install(Vue,options) {
		if(!$vm) {
		    const NwdLoadingPlugin = Vue.extend(NwdLoadingComponent);
		    $vm = new NwdLoadingPlugin({
	                el: document.createElement('div')
	            });
		}
		$vm.show = false;
		let loading = {
                    show(text) {
                        $vm.show = true;
                        $vm.text = text;
                        document.body.appendChild($vm.$el);
                    },
                    hide() {
                        $vm.show = false;
                    }
                };
                if (!Vue.$loading) {
                    Vue.$loading = loading;
                }
                // Vue.prototype.$loading = Vue.$loading;
                Vue.mixin({
                    created() {
                        this.$loading = Vue.$loading;
                    }
                })
	}
}

注释：通过Vue.extend()方法创建了一个构造器NwdLoadingPlugin，其次我们再通过new NwdLoadingPlugin()  创建了实例$vm，并挂载到一个div元素上。最后我们需要通过document.body.appendChild($vm.$el)将其插入到DOM节点中。

当我们创建了$vm实例后，我们可以访问该实例的属性和方法，比如通过$vm.show就可以改变NwdLoadingComponent组件的show值来控制其显示隐藏。

最终我们通过Vue.mixin或者Vue.prototype.$loading来全局添加了$loading事件，其又包含了show和hide两个方法。我们可以直接在页面中使用this.$loading.show()来显示加载，使用this.$loading.hide()来关闭加载。

3.使用插件

main.js

import NwdLoading from '@/components/nwd-loading/index.js'
 
Vue.use(NwdLoading)

4. 调用插件

vue文件中调用，如下

export default {
        created() {
            this.$loading.show("loading内容")
        }
 }

插件中的 Provide / Inject

在插件中，我们可以通过 provide 来为插件用户供给一些内容。

举例来说，我们可以将插件接收到的 options 参数提供给整个应用，让任何组件都能使用这个翻译字典对象。

这个也是处理插件名称冲突常用的解决方式。

官网的例子如下：

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
 
    app.provide('i18n', options)
  }
}

现在，插件用户就可以在他们的组件中以 i18n 为 key 注入并访问插件的选项对象了。

export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}

插件冲突

当多个 Vue 3 插件同时使用时，可能会出现冲突的问题。

两个插件都提供了同名的函数或组件，那么其中一个函数或组件将覆盖另一个函数或组件（这个方式就和自己写的组件名称冲突如出一辙的了，或者我们之前jq时代的命名的冲突类似）。

为了解决这个问题，我们可以使用 Vue 3 插件提供的 provide 和 inject 函数。通过将插件提供的 provide 和 inject 函数注入到组件中，我们可以控制组件中变量的暴露和传递。

举例子：

如果两个插件都提供了名为 myService 的服务，我们可以使用 provide 函数将其中一个服务注入到组件中，并使用 inject 函数将另一个服务注入到组件的父组件中。这样，我们就可以控制组件中 myService 变量的暴露和传递，从而避免冲突。

文章借鉴：

Vue-插件开发 - 掘金

一文详解Vue 3中的的插件