npm发包组件

发布一个属于自己的npm包吧！接下来我们便使用Vue封装组件并发布到npm仓库

封装NPM组件-验证码

预览

整个流程

1、创建账号注册登录（去官网注册登录）
2、创建`vue3项目Tbcode`
3、编写组件
4、登录发布到npm仓库
5、使用组件

1、创建账号注册登录

👉注册申请以及登录账号

官网

https://www.npmjs.com/

正常申请注册即可，选择 sign up 进入账户注册页面

2、创建vue3项目Tbcode

👉搭建项目

yarn create vite NexusCode --template vue

// 安装依赖
yarn 


yarn add path // 路径处理---如果自己不需要的话也可以不安装

🍎最新版本path处理2025（TS+vite）

import { fileURLToPath, URL } from 'node:url'

resolve: {
  alias: {
    // '@': path.resolve(__dirname, 'src')
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
},

👉创建组件

<template>
  <div class="necode">
    <div 
      class="codebox"
      :style="{
        'background': codeback,
        'width': width + 'px',
        'height': height + 'px'
      }"
      @click="getCode(length)"
    >
      {{ codevalue }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 接收父组件传递的 props
defineProps({
  value: {
    type: String,
    required: false,
  },
  length: {
    type: Number,
    default: 4,
    required: false,
  },
  back: {
    type: String,
    required: false,
  },
  width: {
    type: Number,
    default: 120,  // 默认宽度为120px
  },
  height: {
    type: Number,
    default: 40,   // 默认高度为40px
  }
});


const codelength = ref(4);

// 响应式变量
const codevalue = ref(''); // 验证码值
const codeback = ref('');  // 验证码背景色

// onMounted 是 Vue 3 的生命周期钩子，类似于 Vue 2 的 created
onMounted(() => {
  codelength.value=length?length:codelength.value;
  getCode(codelength.value); // 获取验证码
});

// 新增试用码-前端随机生成方法
const getCode = (row) => {
  // 随机背景颜色
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  const rgb = `rgb(${r},${g},${b})`;
  codeback.value = rgb;

  const arrall = [
    'A', 'B', 'C', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
  ];
  let str = '';
  for (let i = 0; i < row; i++) {
    str += arrall[Math.floor(Math.random() * arrall.length)];
  }
  codevalue.value = str;
};
</script>

<style scoped>
.codebox {
  text-align: center;
  font-weight: 800;
  line-height: 40px;
  display: inline-block;
  float: left;
  cursor: pointer;
  font-size: 24px;
  color: #fff;
  border-radius: 4px;
}
</style>

👉包入口导入导出

这里我们需要按照上面添加我们的文件，我的文件比较简单，如下：

• main.js

import { createApp } from 'vue'
import App from './App.vue'
import "./index.js"
createApp(App).mount('#app')

• index.js

import Tbcode from './components/Tbcode/index.vue';
export default Tbcode;

-App.vue

<script setup>
import TbCode from './components/TbCode/index.vue'
</script>
<template>
  <TbCode/>
</template>
<style scoped>
</style>

👉配置package.json

私人化配置

"private": true,
这就代表私人的包

公共包配置（这里我们使用这个）

{
  "name": "tbcode", //必须替换成自己的包名
  "version": "0.0.2", //自己的版本号
  "files": [
    "dist"
  ],
  "module": "./dist/tbcode.es.js", //自己打包以后的es模块-看打包的dist文件
  "main": "./dist/tbcode.umd.js", //自己打包以后的umd模块-看打包的dist文件
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/tbcode.es.ts", //自己打的包dist文件
      "require": "./dist/tbcode.umd.ts" //自己打的包dist文件
    },
    "./dist/style.css": {
      "import": "./dist/tbcode.css", //自己打的包dist文件
      "require": "./dist/tbcode.css" //自己打的包dist文件
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.18"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "vite": "^7.1.2"
  }
}

👉配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'), //解决打包路径
      name: 'TbCode', // 这里替换成自己的
      fileName: (format) => `tbcode.${format}.js` // 自己的包名字
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

3、发布组件

👉版本名字

🍎名称规则

包名使用了@开头，一般使用@符号开头的包都是私有包，npm需要收费

加上--access public可直接发布组件，当成公有包，不需要支付费用

name：发布的包名，默认是上级文件夹名。不得与现在npm中的包名重复。包名不能有大写字母/空格/下滑线!

👉版本登录发布

Major version：大版本，代表破坏性变更。
Minor version：小版本，代表向后兼容的新功能。
Patch version：修订版本，代表 bug 修复和小改进。

🍎 版本发布

//查看当前用户是否登录
npm whoami 

//登陆
npm login 

// 或  npm addUser  

//部署
npm publish

👉登录

会提示你输入你注册npm时候的用户名、密码、邮箱 看到下面的截图说明你已经登录成功

Logged in as qud
https://registry.npmjs.org/.

👉更新名字，再次发布

npm publish提示信息如下

npm notice
npm notice package: tbcode@0.0.2
npm notice Tarball Contents
npm notice 385B README.md
npm notice 169B dist/Necode.css
npm notice 2.0kB dist/necode.es.js
npm notice 1.3kB dist/necode.umd.js
npm notice 613B package.json
npm notice Tarball Details
npm notice name: tbcode
npm notice version: 0.0.2
npm notice filename: tbcode-0.0.2.tgz
npm notice package size: 2.1 kB
npm notice unpacked size: 4.4 kB
npm notice shasum: 97d3dc40035c0e3fcbcb590704e7c0d531d9d16e
npm notice integrity: sha512-M4EQ/J8XRHZNT[...]CC0OwXVluzH8Q==
npm notice total files: 5
npm notice
npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
+ tbcode@0.0.2

搜索已经可以发现我们的npm包了

tbcode

👉更新版本

接下来我们传第二个版本包

添加一些关键词

// 发布一个小的补丁号版本
npm version patch
npm publish

这个时候已经可以看到我们的关键词和版本信息了

Keywords
vuereacttbcodelintaibai林太白

npm version patch -m "xx"
【
    patch增加一位补丁号,
    minor增加一位小版本号,
    major增加一位大版本号
 】

👉取消版本

// 舍弃某个版本的模块  24小时使用这个即可（使用）
npm unpublish tbcode@1.0.0

// 舍弃某个版本的模块
npm deprecate my-npm@"< 1.0.8" "critical bug fixed in v1.0.2"

// 如何撤销发布
npm --force unpublish my_npm

4、使用

发布到 npm 后,安装使用自己封装的组件

安装依赖

npm i tbcode

//或者
yarn add tbcode

项目引入使用

import tbCode from 'tbCode'
import 'tbcode/dist/style.css'

app.component('Tbcode', tbcode) 


<Tbcode/>

🔧问题以及处理

👉组件样式不生效

问题就出现在下面两点

（1）组件的导出方式配置不对

（2）使用时候引入没有

// 导出方式配置
"exports": {
    ".": {
      "import": "./dist/tbcode.es.js",
      "require": "./dist/tbcode.umd.js"
    },
    "./dist/style.css": {
      "import": "./dist/tbcode.css",
      "require": "./dist/tbcode.css"
    }
},


// 引入使用
import 'tbcode/dist/style.css'

👉发布登录报错提示

PS D:\cqweh\vue3-webladmin-package\NexusCode> npm whoaminpm 

error code ENEEDAUTH
npm error need auth This command requires you to be logged in.npm error 
need auth You need to authorize this machine using `npm addu
ser
npm error A complete log of this run can be found in: 
c:\Users\17467\AppData\Local\npm-cache\ logs\2025-08-28T08 
10 34 361Z-debug-0.logPS D:\cqweh\vue3-webladmin-packagelNexusCode>

就是我们没有登录账号

// 解决办法
npm login
//输入账号密码

//发布
npm publish

👉发布名称冲突报错

下面就是名字被占用了

npm notice
npm notice package: Necode@0.0.2
npm notice Tarball Contents
npm notice 385B README.md
npm notice 169B dist/Necode.css
npm notice 2.0kB dist/necode.es.js
npm notice 1.3kB dist/necode.umd.js
npm notice 613B package.json
npm notice Tarball Details
npm notice name: Necode
npm notice version: 0.0.2
npm notice filename: Necode-0.0.2.tgz
npm notice package size: 2.1 kB
npm notice unpacked size: 4.4 kB
npm notice shasum: 6534df3352b5d299457dbff0b6e363b1b6ab6d4f
npm notice integrity: sha512-UZ1QGtymSFl73[...]rc1luwb77w/4Q==
npm notice total files: 5
npm notice
npm notice Publishing to 
  https://registry.npmjs.org/ with tag latest and default access
npm error code E400
npm error 400 Bad Request - PUT https://registry.npmjs.org/Necode - 
"Necode" is invalid for new packages
npm error A complete log of this run can be found in: 
C:\Users\admin\AppData\Local\npm-cache\_logs\2025-08-15T08_24_42_644Z-debug-0.log

no_perms Private mode enable, only admin can publish this module 这是因为镜像设置成淘宝镜像了，设置回来即可：

npm config set registry registry.npmjs.org

如果有需要改回淘宝镜像，再次修改为npm的淘宝链接： npm config set registry registry.npm.taobao.org