记录第一次npm发包!!!

给大家讲讲如何将自己写的组件打包发布到npm

注册一个自己npm账号

登录npm官网注册 地址:npm官网

有账号的直接登录,没有账号就Create Account 跟着步骤一直下一步就好了!!

为什么要发布到npm呢,主要是为了满足公司的场景业务去封装一些经常出现的组件比如表单组件,表格组件,我们在开发的时候直接从项目npm i安装下来就行,不仅能提升代码复用率,还能提升我们开发人员的效率

开始搭建

这里从搭建项目开始,我用的是vite来搭建的vue3项目

npm create vite@latest

跟着官网来好吧-> Vite 官方中文文档

搭建好之后我们在src目录下去创建一个packages文件夹,这个文件夹是用来存放你写的组件的

package目录下需要有一个index文件,这里模拟了一个简单的例子用来导出写好的组件

install方法是内置的,当调用app.use(xxxUI)时,会调用install方法进行全局注册

配置vite.config配置文件

主要是配置一下打包的入口文件

执行打包

dist目录下文件

配置package.json

ruby 复制代码
{
  "name": "c-teamui", // 你的包名,不要和已有的组件库有类似或者重复的名字避免发布失败
  "private": false, // 这里默认为true要设置为false
  "version": "1.0.0", // 管理你的版本号
  "description": "component", // 你的描述
  // main和module都需要配置,用来做兼容环境umd模式,和esm,dist目录打包出来的位置
  "main": "dist/teamui.umd.js",
  "module": "dist/teamui.es.js",
  "types": "dist/index.d.ts",
  "files": [ // 发布包的时候用到的文件目录
    "dist",
    "src"
  ],
  "keywords": [ // 关键词描述
    "vue3",
    "element-plus",
    "component",
    "ui",
    "teamui"
  ],
  "author": "chen",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "你的组件库代码地址"
  },
  "bugs": {
    "url": "你的组件库代码地址"
  },
  "homepage": "你的组件库代码地址",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "c-teamui": "^1.0.0",
    "element-plus": "^2.10.3",
    "vue": ">=3.0.0"
  },
  "devDependencies": {
    "@types/node": "^24.0.10",
    "@vitejs/plugin-vue": "^4.6.2",
    "@vue/tsconfig": "^0.7.0",
    "sass": "^1.89.2",
    "sass-loader": "^16.0.5",
    "typescript": "~5.8.3",
    "vite": "^5.1.4",
    "vite-plugin-dts": "^4.5.4",
    "vue-tsc": "^2.2.10"
  },
  // 这里是你的组件库需要用到的依赖
  "peerDependencies": {
    "element-plus": "^2.10.3",
    "vue": ">=3.0.0"
  }
}

发布npm

  • 要把镜像源改成官网的 npm config set registry registry.npmjs.org/
  • 命令行输入npm login,按照提示给的步骤输入npm的账号密码,然后会发送验证码到你的邮箱输入然后就可以了
  • 最终执行npm publish
  • 完成发布,可以到npm自己个人主页看看
  • 可以到自己项目中执行npm i 包名,然后到main.js中全局注册测试一下没问题啦
相关推荐
木依1 分钟前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui
行云&流水13 分钟前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
弗锐土豆1 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
1undefined21 小时前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
wangpq1 小时前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js
豆苗学前端1 小时前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
我命由我123452 小时前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
快起来别睡了2 小时前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
张旭超3 小时前
vue3 + element-plus el-table表格二次封装,支持复选框,排序,分页。
前端·vue.js
亿坊电商3 小时前
VUE混合开发,选哪个PHP框架最顺手?
前端·vue.js·php