vue造轮子如何包发布到npm!

本文详细介绍如何使用webpack-simple封装Vue组件并发布到npm。从项目创建、配置、打包到npm发布全流程解析,助你轻松掌握发布个人Vue组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如何把自己写的包发布到npm上

参考地址:https://github.com/yuanxin666/sir-zujian.git
包中的组件要基于全局的组件封装,在此不介绍了。

首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名,使用 vue init webpack-simple 命令是因为相比vue init webpack 更加轻量,更适合小型应用

对webpack.config进行配置,filename等等,参照下图,然后执行build命令

 entry: './src/components/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'sir.js',  //打包生成文件的名字
    library:'AreaSelect',   //reqire引入的名字
    libraryTarget:'umd',
    umdNamedDefine:true
  },

这时候会看到,dist目录下有sir.js,需要配置pack.json

  "license": "MIT",
  "private": false,
  "main": "dist/sir.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/yuanxin666/sir-zujian.git"
  },

执行命令 npm login,进行登陆npm账号!
最后执行 npm publish命令,将代码发布上去!

坑,当执行npm publish命令时候,有时会报403,说邮件没用认证,这时候登陆邮箱,点下确定就OK了

cnpm i sirpackages --save命令就可以引入了,同时登陆npm,搜索sirpackages也会看到我们的发布的包!
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值