我们平时用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) {
// 配置此应用
}
}我的理解是，插件就是分解出去的模块，可以把项目中某些功能封装出去，这样团队也可以直接用，甚至可以提交到平台，开源了后供其它人使用。
但是插件发挥作用的常见场景主要包括以下几种：
-
通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。
-
通过 app.provide() 使一个资源可被注入进整个应用。
-
向 app.config.globalProperties 中添加一些全局实例属性或方法
-
一个可能上述三种都包含了的功能库 (例如 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 变量的暴露和传递，从而避免冲突。
文章借鉴：
5430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
