npm发布自己的vue插件/组件包
本文介绍如何发布自己的vue插件/组件包;新手初探,有些用词,理解不当望指正。
发npm包的原由
本人萌新vue开发者,在使用vue的excel解析时用到了某大佬发的vue-xlsx-table;但是这位大佬写的是插件,只能用Vue.use()全局引入(也许我姿势不对);该插件开发环境大小达到了1M+(主要是XLSX.js太大),无奈之下,只能自己改写成一个组件。
正题-如何发包
STEP1:建自己的项目
我用vue-cli的webpack-simple初始化的项目
首先你需要安装vue-cli(node环境什么的就不说了):
npm install -g vue-cli
然后,初始化项目
vue init webpack-simple my-project-name
按照提示回车就好了,完成后你就可以看到你的项目了,截图什么的就不需要了吧。
编写自己的组件
一般是在src文件夹下建一个components目录,新建组件并填充代码;
然后在App.vue里调试你的组件并完善这个demo(这个项目既可以单独来做一个demo,也可以npm安装使用);
<template>
<div id="app">
<div>a simple demo for excel upload</div>
<vueXlsxTable @on-select-file="handle">上传excel</vueXlsxTable>
</div>
</template>
<script>
import vueXlsxTable from './components/vue-xlsx-table'
export default {
components: {
vueXlsxTable
},
...
}
</script>
在package.json里面修改包入口为你的组件位置
"main": "./src/components/vue-xlsx-table.vue",
这样,其他人在安装你的包之后,import你的包名其实就是引入你指定的这个组件文件。
STEP2:建NPM账号
https://www.npmjs.com/
点进去,sign up然后blabla,记得最后去注册邮箱验证账号。
STEP3:登录并发布包
$ npm login
Username: ******
Password: ******
Email: (this IS public) ******
Logged in as acbv12 on https://registry.npmjs.org/.
提示logged就是登陆成功了;
如果使用gitbash,需要在新窗口打开进行后续npm publish操作;
如果是dos窗口,可以在本窗口继续操作;我也不明白为什么,好像用gitbash登录的窗口需要用来保持连接状态。
执行
npm publish
提示下列代码即表示发布成功
+ vue-xlsx-table-components@1.0.0
常见错误
- 已经有同名的包
npm ERR! You do not have permission to publish "vue-xlsx-table". Are you logged
in as the correct user? : vue-xlsx-table
去npm.com搜下你要发的包名,如果已存在你就要改下名字咯
修改package.json里面的name就ok
2. 私有属性字段
npm ERR! You do not have permission to publish "vue-xlsx-table". Are you logged
in as the correct user? : vue-xlsx-table
为了防止私有包被误操作发布,项目初始化都默认为私有项目,去除package.json里面的private字段或者将其属性改为false即可
3. 版本错误
npm ERR! You cannot publish over the previously published version 1.0.0. : vue-x
lsx-table-components
如果你发布了1.0.0的版本,那么你再发布需要修改version