vue2插件编写之前我爱模板网分享过，今天带来vue3的插件封装方法，插件可以是一个公开 install 方法的 object,也可以是 function，包含全局函数和全局组件一起封装：
1、Vue CLI创建项目，名字就叫vue3-plugin-test吧
vue create vue3-plugin-test
因为开发的插件中不会用到 Vuex 和 Router，所以初始化项目是就不要选择了。
默认创建的vue项目的入口是 src 目录下的 main.js。修改 src 为 dev,到时候使用这里的代码来作为插件的测试demo。然后再创建一个 src 文件夹，并再其中创建 main.js 文件作为项目的入口。
2、修改入口配置
修改项目根目录下的package.json文件中的scripts 如下：
"scripts": {
"dev": "vue-cli-service serve dev/main.js",
"build": "vue-cli-service build --target lib --name vue3PluginTest src/main.js",
"test:unit": "vue-cli-service test:unit"
},其中 dev 脚本是配置测试demo的启动，与正常的 vue 项目启动一致，只是修改了一下路径跟脚本名。
因为是开发的一个插件，打包时不能像普通vue项目一样打包成应用，而是要打包成库。Vue脚手架(Vue CLI)可以直接打包库，命令如下：
vue-cli-service build --target lib --name myLib [entry]
所以配置一个 build 脚本用来打包：
"build": "vue-cli-service build --target lib --name vue3PluginTest src/main.js",
3、在 src 的 components 目录下新建 vue3-plugin-test.vue 文件，代码如下：
<template>
<div class="hello">
<h1>vue3PluginTest，传递过来的url：{{params.url}} {{msg}}</h1>
</div>
</template>
<script>
export default {
// 接收插件注册时，传递的初始化参数
inject: ['params'],
name: 'vue3PluginTest',
// 通过props传递进来的参数
props: {
msg: String
}
}
</script>4、插件入口代码
修改 src 目录下的 mian.js
import Component from '@/components/vue3-plugin-test.vue'
export const install = (app, options) => {
// 注册全局函数
app.config.globalProperties.$vue3Plugin = (str) => {
return '全局函数打印的内容：' + str
}
// 注册组件
app.component(Component.name, Component)
// 注册时，传递给插件的参数
app.provide('params', options)
}
export const vue3PluginTest = Component
export default {
vue3PluginTest,
install
}上面的代码可以作为组件插件的一个模板
main.js 第1行代码是从 @/components/vue3-plugin-test.vue 模块导入定义好的组件对象。
main.js 第2-11行代码是定义install方法，这是vue插件加载插件的钩子函数。当通过 app.use(插件) 添加插件时，如果传入的插件是个对象就会调用install方法，如果是一个function，则函数本身会被调用。并且这两种情况下，都会传入两个参数：由 Vue的createApp 生成的 app 对象，和用户传入的选项。所以上面代码中的 install 做了两件事情：
给传入的app对象添加了一个子组件，名字为Component.name,组件为Component,就是 @/components/vue3-plugin-test.vue 定义的组件。
接受用户传入的配置项，并通过provide方法暴露出来，子组件中通过inject方法接收。
main.js 第13行代码是导出组件对象，供局部导入使用，在dev/App.vue中可以通过如下代码局部导入使用：
<template>
<vue3-plugin-test />
</template>
<script>
import vue3PluginTest from "@/main.js"
export default {
name: 'App',
components: {
vue3PluginTest,
}
...
}
</script>main.js 第15-18行代码是导出一个包含组件和install方法，供全局导入使用，在 dev/main.js 中可以通过如下代码全局导入使用：
import { createApp } from 'vue'
import App from './App.vue'
import vue3PluginTest from "@/main";
createApp(App).use(
vue3PluginTest,
// 传递参数给插件
{url: 'http://www.5imoban.net'}
).mount('#app')5、测试插件
在 dev 的 App.vue配置如下代码来测试插件：
<template>
{{$vue3Plugin('哈哈哈')}}
<br>
<vue3-plugin-test :msg="msg" />
</template>
<script>
export default {
name: 'App',
data () {
return {
msg: ''
}
}
}
</script>运行 npm run dev 后的效果如下：
至此，插件就封装好了。
6、 打包
插件编写完成后，运行 npm run build 即可完成打包，打包后会在项目根目录下生成dist文件夹，并生成文件
dist/yourLib.common.js:一个给打包器用的CommonJS包
dist/yourLib.umd.js:一个直接给浏览器或者AMD loader使用的UMD包
dist/yourLib.umd.min.js:压缩后的UMD构建版本
dist/yourLib.css:提取出来的css文件
7、 如何发布到npm
写好的插件可以直接复制到项目中直接使用，也可以通过npm发布共享出来，通过npm install进行安装。非常简单步骤如下：
1.注册npm的账号，注册地址
2.编写package.json
在package.json中编写如下字段：
{
"name": "vue3-plugin-test", # 插件名称
"version": "1.0.0", # 版本号
"license": "MIT", # 许可协议
"keywords": [ # 搜索关键词
"vue3",
"vue3 plugin"
],
"files": [ # 上传文件目录
"dist"
],
}发布
在项目根目录运行命令
npm publish
进行发布。如果是第一次，会提示你登录，输入你注册好的用户名密码即可。成功上传后，就可以通过
npm install 你的插件名称
进行安装使用了。