打包vue组件,上传到npm库

1.先去官网注册npm账号

2.注册成功后,通过webpack-simple创建项目

    npm init webpack-simple custome-switch   成功后生成的目录如下 

  

3.在和src同级的目录下新增 packages目录→在packages目录下新建 src目录 → 在src目录下创建一个switch目录 → 在switch目录下新建 custome.vue 和 index.js   新建好的目录如下

4.编写custome.vue组件的内容  如下  和正常组件编写一样

5.switch/index.js 代码如下

6.修改webpack.config.js的   指定出口  入口文件

7.修改package.json文件  指定main  和 private 修改为false

8.修改index.html  入口index.html  (因为我的名字是custome-switch )

 <script src="dist/custome-switch.js"></script>

最后:

打包生成线上文件 npm run build 登录npm,根据提示完成 :npm login (若是cnpm请且为npm登录) 提交npm包: npm publish(若提示该组件已存在,请更改名字)

ps:如果想要更新npm包的版本  npm version patch   然后npm publish

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值