vue组件上传npm

新建packages文件夹，在里面放需要上传的组件
packages/index.js如下

import grptButton from'./grptButton/grptButton.vue';

const components = [
  grptButton
];

const install = (Vue) => {
  components.forEach(com => {
    Vue.component(com.name, com);
  });
};

export default install;

packages/grptButton/index.js如下

import grptButton from './grpt-button.vue';

export default grptButton;

在package.jon文件中添加打包命令

–target lib 后的路径为指定的打包文件
–name 为打包后的文件名称，也是上传npm后的插件名
–dest 为存放打包文件的文件夹名

运行npm run build:grpt-btn后，项目就会生成grpt-button这个文件夹

进入到存放打包后文件的grpt-button文件夹下，打开命令提示符窗口，输入npm init -y，会生成一个package.json文件

再根据组件写一个使用说明

依然是在grpt-button文件路径下打开cmd，输入npm login回车后输入用户名、密码、邮箱和发送到邮箱的一次性登录验证码后登录，然后npm publish发布

发布成功后在npm网站就可以看到了

参考原文：https://blog.csdn.net/m0_67363703/article/details/126390366

备注：
1 如果想将js与css文件打包到一起，在vue.config.js文件添加如下配置

2 每次更新发布npm包，都要修改package.json中的版本号