发布一个组件到npm，更新版本

准备工作：注册npm账号： npm官网

• 一定记得验证邮箱，不然发布包时会报错： E403
  

初始化一个简单的组件项目

新建组件文件Main.vue， 组件入口文件index.js

• Main.vue

    <template>
      <div class="container">
        <div>{{ msg }}</div>
        <div>{{ propData }}</div>
      </div>
    </template>
  
    <script>
    export default {
      name: "simple-waterfall-zx",
      data() {
        return {
          msg: "A simple waterfall component"
        };
      },
      props: {
        propData: {
          type: String,
          default: "default data"
        }
      }
    };
    </script>
  
    <style lang="scss">
    .container {
      text-align: center;
    }
    </style>
  
  

• index.js

  // 用于将Main.vue暴露出去
  import Main from "./src/component/Main";
  import _Vue from "vue";
  
  Main.install = Vue => {
    if (!Vue) {
      window.Vue = Vue = _Vue;
    }
    Vue.component(Main.name, Main);
  };
  export default Main
  

修改package.json

• 增加"main"字段，指定入口文件
  • require方法可以通过这个配置找到入口文件
• 修改“private”字段值为false（若为true则无法发布到npm）
  

修改webpack.config.js

• 修改entry和output
  • 开发环境下从main.js进入App.vue，生产环境下从index.js进入Main.vue
    

修改index.html

• 修改js文件的引用
  

删除source-map在生产环境下的生成

• 

发布到npm

npm run build

npm publish

更新npm包

• 修改package.json中的版本号version
  

• npm run build

• npm publish
  

使用刚刚发布的npm包