登录
npm发包自己的组件并安装更新版本应该如何做？
2025年8月16日 10:42
npm发包组件
发布一个属于自己的npm包吧！接下来我们便使用Vue封装组件并发布到npm仓库
封装NPM组件-验证码
预览
1、创建账号注册登录
👉注册申请以及登录账号
官网
https://www.npmjs.com/
正常申请注册即可，选择 sign up 进入账户注册页面
2、创建vue3项目Tbcode
👉搭建项目
yarn create vite NexusCode --template vue
// 安装依赖
yarn
👉创建组件
<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>
👉配置package.json
私人化配置
"private": true,
这就代表私人的包
公共包配置（这里我们使用这个）
{
"name": "tbcode",
"version": "0.0.2",
"files": [
"dist"
],
"module": "./dist/tbcode.es.js",
"main": "./dist/tbcode.umd.js",
"type": "module",
"exports": {
".": {
"import": "./dist/tbcode.es.ts",
"require": "./dist/tbcode.umd.ts"
},
"./dist/style.css": {
"import": "./dist/tbcode.css",
"require": "./dist/tbcode.css"
}
},
"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"
}
}
3、发布组件
👉版本名字
🍎名称规则
包名使用了@开头，一般使用@符号开头的包都是私有包，npm需要收费
加上--access public可直接发布组件，当成公有包，不需要支付费用
name：发布的包名，默认是上级文件夹名。不得与现在npm中的包名重复。包名不能有大写字母/空格/下滑线!
👉版本登录发布
Major version：大版本，代表破坏性变更。
Minor version：小版本，代表向后兼容的新功能。
Patch version：修订版本，代表 bug 修复和小改进。
🍎 版本发布
//查看当前用户是否登录
npm whoami
//登陆
npm login
// 或 npm addUser
//部署
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
👉更新名字，再次发布
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'
