打包vue组件，上传npm库(详细版)

第一步去npm官网注册账号

https://www.npmjs.com

通过webpack-simple构建项目

vue init webpack-simple simple-ui
可见目录如下：

操作步骤

在src下新建一个文件packages--对所有组件进行管理
首先写个button组件
package下新建文件SimButton
新建index.js与SimButton.vue 

SimButtpn/index.js代码如下(引入相应的vue文件,注册为组件，然后导出)

import SimButton from './SimButton.vue'
SimButton.install = Vue => {
    Vue.component(SimButton.name, SimButton)
}
// global 情况下 自动安装
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(SimButton)
}
// 导出模块
export default SimButton

SimButtpn/SimButton.vue代码如下(正常的子组件代码)

<template>
  <div>
    <button type="button" :class="type">{{value}}</button>
  </div>
</template>
<script>
export default {
  name: "SimButton",
  props: {
    value: {
      default: "按钮",
      type: String
    },
    type:{
      default:"primary",
      type:String
    }
  }
};
</script>
<style scoped>
.primary{
  padding: 0.8em;
  background: #007ACC;
  color: #fff;
  border: none;
  border-radius: 0.4em;
}
.primary:hover{
  background: #40a9ff;
}
.danger{
   padding: 0.8em;
  background: #f5f5f5;
  color: red;
  border: grey;
  border-radius: 0.4em;
}
.danger:hover{
  background: #FF4D4F;
  color: #fff;
  border: none;
}
</style>

src/index文件，所以组件的出口文件

import SimButton from './packages/SimButton'
import SimInput from './packages/SimInput'
const components = [
    SimButton,
    SimInput
    //还可再添加组件
]
const install = function (Vue, opts = {}) {
    components.map(component => {
        Vue.component(component.name, component);
    })
}
/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}
export default {
    install,
    SimButton,
    SimInput
    //若有，则继续导出
}

对package.json进行配置修改

增加main配置项，选择import时的文件
修改private为公开的，改为false

对webpack.config.js进行修改配置

修改入口文件，改为组件的出口文件src/index
修改出口文件的名字filename
修改当通过require引入时的名字：library
然后增加剩余的配置项

修改根目录下index.html

修改引入的script名称(我的名字是simple-ui)，改为如下
<script src="/dist/simple-ui.js"></script>

修改.gitignore

去掉dist/，增加src/

结尾操作

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

通过npm的方式使用该组件

 npm i simple-ui
 在main里引入
 import SimpleUI from 'simple-ui'
 Vue.use(SimpleUI)
 调用SimButton组件
 <SimButton type="danger"/>