vue2插件编写之前我爱模板网分享过,今天带来vue3的插件封装方法,插件可以是一个公开 install 方法的 object,也可以是 function,包含全局函数和全局组件一起封装:
1、Vue CLI创建项目,名字就叫vue3-plugin-test吧
1 | vue create vue3-plugin- test |
因为开发的插件中不会用到 Vuex 和 Router,所以初始化项目是就不要选择了。
默认创建的vue项目的入口是 src 目录下的 main.js。修改 src 为 dev,到时候使用这里的代码来作为插件的测试demo。然后再创建一个 src 文件夹,并再其中创建 main.js 文件作为项目的入口。
2、修改入口配置
修改项目根目录下的package.json文件中的scripts 如下:
2 | "dev" : "vue-cli-service serve dev/main.js" , |
3 | "build" : "vue-cli-service build --target lib --name vue3PluginTest src/main.js" , |
4 | "test:unit" : "vue-cli-service test:unit" |
其中 dev 脚本是配置测试demo的启动,与正常的 vue 项目启动一致,只是修改了一下路径跟脚本名。
因为是开发的一个插件,打包时不能像普通vue项目一样打包成应用,而是要打包成库。Vue脚手架(Vue CLI)可以直接打包库,命令如下:
1 | vue-cli-service build --target lib --name myLib [entry] |
所以配置一个 build 脚本用来打包:
1 | "build" : "vue-cli-service build --target lib --name vue3PluginTest src/main.js" , |
3、在 src 的 components 目录下新建 vue3-plugin-test.vue 文件,代码如下:
03 | <h1>vue3PluginTest,传递过来的url:{{params.url}} {{msg}}</h1> |
10 | name: 'vue3PluginTest' , |
4、插件入口代码
修改 src 目录下的 mian.js
01 | import Component from '@/components/vue3-plugin-test.vue' |
02 | export const install = (app, options) => { |
04 | app.config.globalProperties.$vue3Plugin = (str) => { |
05 | return '全局函数打印的内容:' + str |
08 | app.component(Component.name, Component) |
10 | app.provide( 'params' , options) |
12 | export const vue3PluginTest = Component |
上面的代码可以作为组件插件的一个模板
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中可以通过如下代码局部导入使用:
05 | import vue3PluginTest from "@/main.js" |
main.js 第15-18行代码是导出一个包含组件和install方法,供全局导入使用,在 dev/main.js 中可以通过如下代码全局导入使用:
1 | import { createApp } from 'vue' |
2 | import App from './App.vue' |
3 | import vue3PluginTest from "@/main" ; |
5、测试插件
在 dev 的 App.vue配置如下代码来测试插件:
02 | {{$vue3Plugin( '哈哈哈' )}} |
04 | <vue3-plugin-test :msg= "msg" /> |
运行 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中编写如下字段:
02 | "name" : "vue3-plugin-test" , # 插件名称 |
03 | "version" : "1.0.0" , # 版本号 |
04 | "license" : "MIT" , # 许可协议 |
发布
在项目根目录运行命令
进行发布。如果是第一次,会提示你登录,输入你注册好的用户名密码即可。成功上传后,就可以通过
进行安装使用了。