VUE组件发布到npm

npm i wuquanwu-modal -S

组件中的name为 modal 
所以下载使用的时候组件名要为modal

main.js中使用
import modal from "wuquanwu-modal";
import "wuquanwu-modal/ui-modal.css";
Vue.use(modal);

VUE组件发包步骤

1. vue create 项目名   package.json    打包命令,这里为 npm run ui

{
  "name": "mynpm-project",
  "version": "0.1.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "ui": "vue-cli-service build --target lib ./src/ui/index.js --name ui-modal --dest dist-modal"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

2.组件所在文件夹下定义 xx.js文件，批量注册组件

import modal from "../modal/Index.vue";
const coms = [modal];

const install = function (Vue) {
  console.log("Installing", modal);
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};

export default { install };

3.进入打包后的目录，npm init -y  生成package.json文件
我们要发布的就是这个打包后的目录
npm包名 即为package.json中的name