yarn create vite 

• index.vue

<template>
    <div>
        {{ msg }}
    </div>
</template>
<script setup>
defineProps({
    msg: {
        type: String,
        default: 'hello',
    },
})
</script>

• index.js

import Container from './container/index.vue'

export const install = (app) => {
    app.component('Container', Container)
}

export default {
    version: 'test',
    install,
    Container,
}

• vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 主要用于alias文件路径别名
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    build: {
        outDir: 'lib', //打包输入目录
        lib: {
            entry: resolve(__dirname, './packages/index.js'),
            name: 'container',
            fileName: () => `container.js`,
        },
    },
})

• package.json

{
  "name": "vue-container",//import npm 名字
  "private": false,//私有设置为false
  "version": "0.0.1",
  "main": "lib/container.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "build": "^0.1.4",
    "vue": "^3.2.25",
    "vue-contaienr": "^0.0.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "vite": "^2.9.2"
  }
}

• 打包

yarn build

• 发布到npm

npm login
npm publish
npm unpublish vue-container@0.0.1 --force #删除后同样的包名24小时后方可上传

• 发布完项目下载使用

yarn add vue-container

第一种

• main.js

import contaienr from 'vue-container'
app.use(container)

• App.vue

<Container msg="hello world">

第二种

• App.vue

<Container msg="hello world">
<script setup>
import { Container } from 'vue-container'
</script>