Vue3.0封装组件并发布到npm仓库

由于业务需求，需要将拨号组件封装上传到npm仓库，供其他同学使用

组件封装

因为需要封装多个组件，所以在src下面新建一个package文件用用于存放需要上传的组件
这里我是封装了四个组件，nx-dial、nx-body、nx-recent、nx-record

编写组件代码

例如

<template>
  <div>
    <button>我是测试按钮</button>
  </div>
</template>
<script>
export default {
  name: "pig-button", //组件名
};
</script>
<style scoped>
button {
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
</style>

然后我们引用到App.vue组件里面验证一下，看是否组件可用

使用Vue插件模式

这一步是封装组件中的重点，用到了Vue提供的一个公开方法：install。这个方法会在你使用Vue.use(plugin)时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
在package目录下新建index.js文件，代码如下：

import NxDial from "./nx-dial/index.vue"; // 引入封装好的组件
import NxStatus from "./nx-status/index.vue"; // 引入封装好的组件
import NxBody from "./nx-body/index.vue"; // 引入封装好的组件

const coms = [NxDial, NxStatus, NxBody]; // 将来如果有其它组件,都可以写到这个数组里

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

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

使用Vue插件模式

到这里为止，组件封装基本已完成，接下来需要对组件进行打包
修改我们项目得package.json文件，新增一个打包命令

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

输出打包的文件名为nx-cc
打包命令解释：
• --target lib 关键字 指定打包的目录
• --name 打包后的文件名字
• --dest 打包后的文件夹的名称
打包后会出现使用者无法安装的问题，可使用一下方法尝试解决
在vue.config.js的configureWebpack中配置

  configureWebpack: {
    output: {
      library: 'nx-cc',
      libraryTarget: 'umd', // 把子应用打包成 umd 库格式
      //
      chunkLoadingGlobal: 'webpackJsonp_nxcc'
    }
  }

初始化配置文件

打包成功后，使用cd进入对应打包好的文件夹中，需要初始化一个package.json文件，执行命令如下

npm init -y

会生成一个package.json文件

{
  "name": "nx-cc",
  "version": "0.0.1",
  "description": "",
  "main": "nx-cc.common.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

每次发布都需要对version版本进行递增，可手动也可以执行命令进行递增

npm version patch

发布到npm

发布之前，首选需要设置npm源，如果想要发布npm包，我们得把我们的npm源切换为官方得源，命令如下：

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

然后添加npm用户
进入组件目录，添加npm用户，执行命令：

npm adduser

最后执行发布命令，如下

npm publish

如果发布失败可能是名字重复了，改了名字即可，发布成功后，我们即可登录npm官网上查看自己发布得npm包

安装使用

npm正常install引入即可