Vue封装组件并发布到npm仓库

1、在vue起始项目路径src下创建package文件夹，并封装组件xsim-button

2、在package文件夹下创建index.js文件

// 引入封装好的组件
import XsimButton from "../package/xsim-button/index.vue";
// 其他组件都可以写到这个数组里
const coms = [XsimButton];

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};

// 此方法以后再使用的时候可以被use调用
export default install;

3、在package.json文件scripts中添加：

"package": "vue-cli-service build --target lib ./src/package/index.js --name xsim --dest xsim"

--target lib 关键字 指定打包的目录
--name 打包后的文件名称
--dest 打包后的文件夹名称

4、执行命令，进行组件打包

npm run package

 5、发布到npm仓库

注册npm账号

cd .\xsim\

npm config set registry=https://registry.npmjs.org

npm adduser

npm init -y

npm publish

npm install xsim-ui

6、main.js文件注册组件

import { createApp } from "vue";
import App from "./App.vue";
import XsimUi from "xsim-ui";
import "xsim-ui/xsim.css";

createApp(App).use(XsimUi).mount("#app");