最近在開發專案，發現很多功能都是以前專案公用的，直接copy發現很費事，於是百度了發現，直接將每一個元件釋出到npm上，以後使用直接npm install xxx包就可以了，現將最近研究的結果及入的坑描述如下

一、編寫自己的npm包

vue init webpack-simple 包名（注意包名不要和https://www.npmjs.com/package/package上的重名 重名了會報錯）

配置完後，命令列執行npm install安裝依賴包，安裝完會生成一個node_modules目錄

在src目錄下新建plugin資料夾，放外掛。我這裡封裝了一個圖片預覽的外掛，下面是我的目錄檔案結構

preview.vue

注意程式碼中的標紅，引入 element-ui的標籤時要新增如下操作，否則頁面會報el-dialog等未註冊異常

<template>
  <el-dialog :title="title"
  :visible="visible"
  top="20px"
  :append-to-body="appendToBody" :close-on-click-modal="closeOnClickModal"
    class="orioc-imagebox orioc-vcenter-dialog " @close="close">
    <el-carousel :interval="5000" :arrow="arrow" ref="carousel" :initial-index="index+1">
      <el-carousel-item v-for="item in lstImg" :key="item" :name="item" v-if="lstImg && lstImg.length>0">
        <div class="imagebox-item" v-bind:style="{backgroundImage:'url(' + item + ')'}">
        </div>
      </el-carousel-item>
    </el-carousel>
  </el-dialog>
</template>
<script>
  import ElDialog from "element-ui/lib/dialog";
  import ElCarousel from "element-ui/lib/carousel";
  import ElCarouselItem from "element-ui/lib/carousel-item";
 

  export default {
    //新增專案步驟
    name: 'previewImage',
    components: {
      [ElDialog.name]: ElDialog,
      [ElCarousel.name]: ElCarousel,
      [ElCarouselItem.name]: ElCarouselItem,
    },
    data() {
      return {
        //dom新增到body上，關係到modal的index
        appendToBody: true,
        closeOnClickModal: false,
        visible: false,
        title: '',
        arrow: 'always', // 切換箭頭的顯示時機 never 不顯示
        index: 0, // 顯示第幾張圖片
        previewurl: '', //
        lstImg: [],

      }
    },

    methods: {

      show(params) {
        this.visible = true
        this.title = params.title || ''
        this.arrow = params.lstImg.length > 1 ? 'always' : 'never'
        this.index = params.index || 0
        this.lstImg = params.lstImg
      },

      setIndex() {
        let index = this.lstImg.findIndex((v) => {
          return v === this.previewurl
        })
        setTimeout(() => {
          this.$refs.carousel.setActiveItem(this.previewurl)

        }, 500)

      },

      //取消的時候關閉對話方塊
      close() {
        this.visible = false
        this.$emit('hide')
      },

      confirm() {
        this.visible = false
        this.$emit('hide')
      },

    },




    destroyed() {

    }
  }

</script>

<style scoped>
  .orioc-imagebox>>>.el-dialog {
    width: 90%;
    height: 90%;
  }

  .imagebox-item {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .orioc-imagebox>>>.el-dialog__body {
    height: calc(100% - 60px)
  }

  .orioc-imagebox>>>.el-carousel {
    height: calc(100%)
  }

  .orioc-imagebox>>>.el-carousel__container {
    height: calc(100%)
  }

  .orioc-imagebox>>>.el-dialog__headerbtn {
    top: 10px
  }

</style>

index.js

import preview from './preview'

let orioc = {}

orioc.install = function(Vue, opt){
  Vue.prototype.$msg = 'Hello I am orioc外掛'

  Vue.component(preview.name, preview)
}

export default orioc

webpack.config.js的配置檔案

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/plugin/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'oriocComponent.js',
    library: 'oriocComponent', // library指定的就是你使用require時的模組名，這裡便是require("toastPanel")
    libraryTarget: 'umd', //libraryTarget會生成不同umd的程式碼,可以只是commonjs標準的，也可以是指amd標準的，也可以只是通過script標籤引入的。
    umdNamedDefine: true // 會對 UMD 的構建過程中的 AMD 模組進行命名。否則就使用匿名的 define。
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

檔案寫好後，我們執行npm run build，會在 dist 目錄下生成一個oriocComponent.min.js，就是我們在 webpack.dev.conf.js 中filename的值

接下來就處理package.json檔案了

上面工作完成後，就可以進入到npm發包過程了。

二、釋出npm包

a. 到 https://www.npmjs.com 註冊npm賬號（具體步驟，自行百度）

b.進入專案根目錄，執行npm login

　　 輸入使用者名稱、密碼和郵箱 (輸入密碼時游標沒有變化是正常的，只要正確輸入就行)

c.登入成功後，執行npm publish，就可以將包釋出到npm官網上去看了

三、使用剛釋出的包

a.在你的專案裡直接npm installorioc-vue-components-s

b.main.js中引入

注：如果後期想更新此包，直接在原檔案上修改，然後在package.json中修改版本號即可：