526互联

vue3 - 在单独的项目制作自定义组件插件，支持vite【前提不要使用webpack专属语法】

发布时间 2023-03-31 14:42:52作者: 岑惜

1.背景

与vue2组件不一样，没有那么随意，如果想要支持vite，那么不要使用webpack专属语法，如defide 和 require 等

2.解决

在 package.json 文件

属性  main 配置为插件入口文件位置 ，至于是js还是ts随意

 

目录

 

 

简单做了个组件

 

 入口文件内容如下

import Component from './components/food22/food22.vue'

export const install = (app, config) => {
    //挂载全局变量或方法
    app.config.globalProperties.$kkkfood22 = '自定义全局变量'
    //挂载组件
    app.component(Component.name, Component)
    //引用时入参，可在组件中使用inject来获取，名字随意，但小心重复
    app.provide('component-global-config', config)
}

//局部引入时使用，Food22就是组将名字，需要与组件内的name属性相同
export const Food22 = Component
export default {Food22, install}