A plugin must either be a function or an object with an “install“ function

前言：

最近一个项目使用了vue3+ts+vite模型框架，在框架的基础之上进行的开发，开发过程中遇到一个问题，控制台有提示信息，如下图：

 小小一行黄字，恶心人呀。。。

这话的意思大概是：插件必须是带有“install”的函数或对象

说实话，看翻译还是不太懂，然后就查了一下，出现该问题的原因是在main.ts文件中app.use()没有正确使用对应插件。。。

修改前代码

import { createApp } from 'vue'
// pinia状态管理
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
// 国际化
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 打印
// import print from 'vue3-print-nb'
import VueDragResize from 'vue-drag-resize'
// import vueEsign from 'vue-esign'
import App from './App.vue'
import i18n from './language/i18n'
// element plus图标库
import 'element-plus/dist/index.css'
import '@/styles/index.scss' // global css

// 路由
import router from '@/router/index'
// 这是一个 SVG 图标库，它提供了一组 SVG 图标，可以在应用中使用。
import 'virtual:svg-icons-register'
// 这是一个自定义的 Vue 组件，它提供了将 SVG 图标作为 Vue 组件使用的能力。
import svgIcon from '@/components/SvgIcon/index.vue'
import './assets/main.css'

// import './permission'

const app = createApp(App)
const pinia = createPinia()

app.use(router)
app.use(ElementPlus)
app.use(i18n)
// app.use(vueEsign)
app.use(pinia)
// app.use(print)

// useElementPlus(app)

app.component('SvgIcon', svgIcon)
app.use('vue-drag-resize' as any, VueDragResize)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}

// 挂载
app.mount('#app')

修改后代码

import { createApp } from 'vue'
// pinia状态管理
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
// 国际化
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 打印
// import print from 'vue3-print-nb'
// import VueDragResize from 'vue-drag-resize'
// import vueEsign from 'vue-esign'
import App from './App.vue'
import i18n from './language/i18n'
// element plus图标库
import 'element-plus/dist/index.css'
import '@/styles/index.scss' // global css

// 路由
import router from '@/router/index'
// 这是一个 SVG 图标库，它提供了一组 SVG 图标，可以在应用中使用。
import 'virtual:svg-icons-register'
// 这是一个自定义的 Vue 组件，它提供了将 SVG 图标作为 Vue 组件使用的能力。
import svgIcon from '@/components/SvgIcon/index.vue'
import './assets/main.css'

// import './permission'

const app = createApp(App)
const pinia = createPinia()

app.use(router)
app.use(ElementPlus)
app.use(i18n)
// app.use(vueEsign)
app.use(pinia)
// app.use(print)

// useElementPlus(app)

app.component('SvgIcon', svgIcon)
// app.use('vue-drag-resize' as any, VueDragResize)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}

// 挂载
app.mount('#app')

排查之后发现，是VueDragResize搞鬼。。。注释或者删除就行了。。。提示消失