现在以插件名为 vue-drag-infinite为例，具体内容可通过以下方式进行下载
github查看源代码

npm install --save vue-drag-infinite

第一步初始化一个项目

封装vue的插件用webpack-simple很合适，使用命令：vue init webpack-simple vue-gitment 进行项目初始化，项目结构如下图所示：

初始化项目结构

1 首先打开清除掉无用的文件 具体清除内容为：

1.src下的所有文件
2.根目录下的 index.html 文件

2 修改根目录下的 package.json 里的内容

{
  "name": "vue-drag-infinite",// 插件名称 再初始化项目的时候 可以设置 也可以在这里进行修改
  "description": "A Vue.js project",//插件描述
  "version": "1.1.2",//版本号 每次向npm上 publish的时候要修改一下 自增的形式
  "author": "zhaosq <615683167@qq.com>",
  "license": "MIT",//许可证
  "private": false,//默认是true 私人的 需要改为false 
  "main":"dist/vue-drag-infinite.js",//这个超级重要 决定了你 import xxx from “vue-drag-infinite” 它默认就会去找 dist下的vue-drag-infinite 文件
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0", // 依赖包名称  以及对应的版本号
    ........ 此处依赖吧不做解释
  }
}

3.修改根目录下方的 webpack.config.js文件内容

var path = require('path')
var webpack = require('webpack')// commonjs 的形式引入webpack
module.exports = {
  // entry: './src/main.js',
  entry: './src/lib/index.js',//文件入口
  output: {//文件出口配置
    path: path.join(__dirname, './dist'),// 出口路径
    publicPath: '/dist/',//build打包路径
    filename: 'vue-drag-infinite.js',//打包后文件名称  设置为与插件名称一致
    libraryTarget:'umd',//libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
    library:'VueDragInfinite',//library指定的就是你使用require时的模块名，这里便是require("VueDragInfinite")
    umdNamedDefine:true//会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
  },
  module: {.....},//对应 vue文件 js文件 css文件 url文件 sass文件 style行内样式 进行解析
  devtool: '#eval-source-map',//相关选项有几种 不再过多解释，现在要做的是在打包后不再生成.map结尾的文件  将值设为 false
}

4.进行插件内容的编写 根据vue官网要求 需要使用 install

先在 src文件下创建 lib文件夹 在lib文件夹下创建一个 index.js 和一个 vue-drag-infinite.vue文件
index.js文件内容如下

import vueDragInfinite from './vue-drag-infinite.vue'
const dragInfinite = {
    install(Vue, options) {
        Vue.component(vueDragInfinite.name, vueDragInfinite) // vuePayKeyboard.name 组件的name属性
        // 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
        // Vue.prototype.$xxx  // 最终可以在任何地方通过 this.$xxx 调用
        // 虽然没有明确规定用$开头  但是大家都默认遵守这个规定
    }
}
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(dragInfinite);
}
export default dragInfinite;

vue-drag-infinite.vue文件内容如下

<template>
    <div class="contain" ref="dragContain">
        <div class="control" v-drag="contain">
            <div style="line-height:30px;background:#409EFF;cursor:move;color:#fff;text-indent:15px;">
                控制面板
            </div>
            <div style="padding:7px;" @mousedown="mouseDown($event,false)">
                <el-form ref="form" size="mini" label-width="70px">
                  <el-form-item label="模板名称">
                    <el-input v-model="name"></el-input>
                  </el-form-item>
                  <el-row  v-if="json.length">
                      <el-form-item>
                        <el-button type="primary" @click="onSave">保存</el-button>
                      </el-form-item>
                      <el-form-item label="宽度">
                        <el-input v-model.lazy="json[divindex].style.width"></el-input>
                      </el-form-item>
                      <el-form-item label="高度">
                        <el-input v-model.lazy="json[divindex].style.height"></el-input>
                      </el-form-item>
                      <el-form-item label="字体大小">
                        <el-select v-model.lazy="json[divindex].style.fontSize" placeholder="请选择字体大小">
                          <el-option label="12px" value="12px"></el-option>
                          <el-option label="14px" value="14px"></el-option>
                          <el-option label="16px" value="16px"></el-option>
                          <el-option label="18px" value="18px"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-row>
                          <el-col :span="12">
                            <el-form-item label="背景颜色">
                            <el-color-picker v-model.lazy="json[divindex].style.backgroundColor" show-alpha></el-color-picker>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="文字颜色">
                            <el-color-picker v-model.lazy="json[divindex].style.color"></el-color-picker>
                            </el-form-item>
                          </el-col>
                      </el-row>
                        
                      <el-form-item label="文字内容">
                        <el-input type="textarea" v-model="json[divindex].text"></el-input>
                      </el-form-item>
                  </el-row>
                    <el-row>
                      <el-button type="primary" size="mini" @click="addDive()">新增div</el-button>
                    </el-row>
                </el-form>
            </div>
        </div>
        
        <div v-drag="contain" class="drag" :class="{active:index == divindex}" v-if="json.length" v-for="(item,index) in json" @click="moveDiv(index,$event)" :style="item.style">
            {{item.text}}
            <i class="el-icon-menu sacle" v-if="index == divindex" @click="sacle($event)" @mousedown="mouseDown($event,true)"  unselectable="on"></i>
            <el-button type="danger" class="del"  @click="del(index,$event)" v-if="index == divindex" icon="el-icon-delete" circle></el-button>
        </div>
        <div v-if="!json.length">暂时没有内容哦！！期待您的编辑</div>
    </div>
</template>
<script >
export default {
    name:'vue-drag-infinite', // 此处name名称  在index.js 文件中有引用  所以最好跟插件名称一致，避免chux
    props: {
        json: {
            type: Array,
            default: []
        },
        name: {
            type: String,
            default: '小清新'
        },
    },
    data(){
        return {
            //外层容器的宽高 数值不带px单位
            contain:{
                xx:500,
                yy:500
            },
            //存放拉伸放大时的  div的原始宽高 带px单位
            movejson:{
                moveWidth:'',
                moveHeight:''
            },
            divindex:0,//当前选中div的序号  默认为0
        }
    },
    mounted(){  
        this.contain.xx = this.$refs.dragContain.offsetWidth;
        this.contain.yy = this.$refs.dragContain.offsetHeight;
    },
    methods:{
        // 字符串转json对象
        toJson(str){
          let _str =eval('(' + str + ')');
          return _str;
        },
        //外层div点击选择事件 绑定右上角设置面板
        moveDiv(index,e){
            let jsonNew = this.toJson('{"'+e.target.style.cssText.replace(/\; +/g, "\",\"").replace(/\: +/g, "\":\"").replace(/\;+/g, "").replace(/-\w/g, function ($) {return $.slice(1).toUpperCase();})+'"}');
            //当前选中div的序号
            this.divindex = index;
            // 设置div框的 各种属性
            for (let em in jsonNew) {
                this.json[index].style[em]= jsonNew[em]; 
            }
            this.json[index].text= e.target.innerText;
        },
        //添加一个div块 默认的
        addDive(){
            let newJson = {
                style:{
                    width:"80px",
                    height:"50px",
                    fontSize:"14px",
                    color:"#ffffff",
                    backgroundColor:"#333333"
                },
                text:'新的div'
            };
            this.json.push(newJson);
        },
        //删除当前div
        del(i,e){
            this.json.splice(i, 1);
            if(i == this.json.length){
                this.divindex = 0;
            }
            e.stopPropagation();
        },
        onSave(){
            let data = this.json;
            this.$emit('save',data)
        },
        //div上拉伸的阻止冒泡事件
        sacle(e){
            e.stopPropagation();
        },
        //div上拉伸的 放大 缩小div宽高
        mouseDown(e,type){
            if(type){
                let that = this;
                let oldX = e.pageX,oldY = e.pageY;
                that.movejson.moveWidth = that.json[that.divindex].style.width;
                that.movejson.moveHeight = that.json[that.divindex].style.height;
                document.onmousemove = function (e){
                    let newX = e.pageX - oldX;
                    let newY = e.pageY - oldY;
                    that.json[that.divindex].style.width = ((newX+ parseInt(that.movejson.moveWidth))>=80?(newX+ parseInt(that.movejson.moveWidth)):'80')+'px';
                    that.json[that.divindex].style.height = ((newY+ parseInt(that.movejson.moveHeight))>=50?(newY+ parseInt(that.movejson.moveHeight)):'50')+'px';
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
            }
            e.stopPropagation();
        }
    },
    computed: {
    },
    directives:{
        drag:{
            bind: function (el, binding, vnode) {
              el.onmousedown = function(e){
                var disx = e.clientX - el.offsetLeft;
                var disy = e.clientY - el.offsetTop;
                document.onmousemove = function (e){
                    let left = e.clientX - disx;
                    let top = e.clientY - disy;
                    if(left<0){
                        left = 0;
                    }
                    if(top<0){
                        top = 0;
                    }
                    if(left>binding.value.xx-el.offsetWidth){
                        left = binding.value.xx-el.offsetWidth;
                    }
                    if(top>binding.value.yy-el.offsetHeight){
                        top = binding.value.yy-el.offsetHeight;
                    }
                    el.style.left = left+'px';
                    el.style.top = top+'px';
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
            }
          },
        }
    }

}

</script>
<style lang='scss' scoped>
    ul,li{margin:0px;list-style:none;padding:0px;}
    .contain{height: 700px;background:#ddd; position: relative;user-select:none;}
    .el-form-item--mini.el-form-item{
        margin-bottom:7px;
    }
    .drag{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            cursor:move;
            background-color: red;
            border:1px solid #FFF;
            line-height:1.7;
            box-sizing:border-box;
            color:#fff;
            overflow: hidden;
            padding:5px;
            .sacle{
                position:absolute;
                right:0px;
                bottom:0px;
                background-color:#909399;
                cursor: se-resize;
                font-size:15px;
            }
            .del{
                position:absolute;
                top:0px;
                right:0px;
                padding:5px;
                box-shadow:0px 0px 10px rgba(255, 255, 255,0.5);
            }
    }
    .drag.active{
        border-radius:5px;
        border:1px solid #85ce61;
        box-shadow:0px 0px 20px rgba(0,0,0,0.5);
        
    }
    .control{
        width:250px;
        border-radius:5px;
        overflow:hidden;
        background-color:#B3C0D1;
        position:absolute;
        z-index:999;
        right:20px;
        top:15px;
    }

</style>

5.插件打包 build

npm run build 在dist文件夹中会出现一个vue-drag-infinite.js 文件
由于在webpack.config.js 中设置了 devtool：false，所以不会出现.map文件

下一步 npm插件的发布

首先在npm官网上进行账号的注册，各位自行注册
下载git工具，在git官网上进行下载 主要有俩个命令

npm login //登陆
npm publish //上传

publish后的文件找不到dist文件夹
原因是我们的忽略文件默认忽略了 dist 文件
修改根目录下的 .gitignore 去掉忽略dist

git登陆上传详情
关于出现各种npm publish 失败的情况 可以观看本人另一篇文章
点击这里

最后说一下 关于插件的使用描述 md文件的编写

详细语法可以自行百度

代码编写区域

# h1标签  ## h2标签 ###### h6 标签

以上内容 个人手打与总结，有错误的地方还望各位大神指出