npm发布自己的vue插件/组件包

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 uploaddiv>
        <vueXlsxTable @on-select-file="handle">上传excelvueXlsxTable>
    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

常见错误

1. 已经有同名的包

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