公用vue组件发布到 npm仓库公用组件除了在同一个项目里面通用，也有可能在多个项目公用，特别是后台系统的表格和表单组件

公用组件除了在同一个项目里面通用，也有可能在多个项目公用，特别是后台系统的表格和表单组件，这边就简单记录一下如何把公用组件封装到npm仓库。

1.注册并登录npm官网

2.创建项目并运行项目

vue create hdy-ui

cnpm run i

cnpm run dev

3. 在src目录下创建package文件夹

在package文件夹下存放需要封装的组件和公用方法

4. 编辑通用组件和通用方法

在hdy-button.vue写一个公用按钮

<template>
  <button>按钮</button>
</template>
<script lang='ts' setup>
</script>
<style scoped>
button {
  background-color: #25bcfc;
}
</style>

在hdy-js.js写一个比较两个数大小的方法

function compareNumbers(num1, num2) {
    return num1 > num2 ? num1:num2;
}

可以先在App.vue组件先验证

<!-- src/App.vue -->
<template>
  <hdyButton />
</template>

<script>
import { ref, defineComponent,onMounted } from "vue";
import hdyButton from "./package/hdy-button/index.vue";
import { compareNumbers } from "./package/public-js.js";

export default defineComponent({
  components: {
    hdyButton,
  },
  setup() {
    onMounted(()=>{
        console.log(compareNumbers(1,2))
    })
  },
});
</script>

5. 组件打包

在根目录的package.json文件，配置打包命令：

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

接着执行打包命令：

cnpm run package

完成之后就回在根目录生成一个hdy-ui的文件夹，打开一看会发现跟我们平时下载的依赖包（node-module里面的文件长得很像）

6. 在hdy-ui文件下创建并初始化package.json，执行命令

cnpm init -y

name:"依赖包名称" version:"版本号"最好每次都+1，跟上一个版本作区分

7. 发布到npm仓库

7.1 设置npm源

cnpm config set registry xxxx 一般公司都会有自己的私库，替换成公司私有库地址就行了

7.2 登录

cnpm login -registry=xxxx

7.3 发布

cnpm publish -registry=xxxx

8 使用

8.1 先切换到私有库地址

cnpm config set registry xxxx

8.2 下载依赖

cnpm i hdy-ui

8.3 页面上面使用

<template>
    <hdyButton/>
</template>

import hdyButton from "hdy-ui";

components: { hdyButton },

公用vue组件发布到 npm仓库

1.注册并 登录npm官网