这...

首先样式, 你这里有了, 布局应该可以根据自己的需求模拟出来.
同时推荐 CSS的垂直居中方法, 可以了解一下垂直居中.

其次这个组件可能出现的动态内容,主要有6个:

1. title: 删除奖品,
2. content: 是否确认删除,
3. left_btn: 取消,
4. right_btn: 确定,
5. left_btn.onclick, 点击取消的回调
6. right_btn.onclick, 点击确定的回调

所以写一个组件,

function test(title, content, left_btn, right_btn, left_btnClick, right_btnclick){
    //传入参数 对应生成html append到页面当中.
}

vue思路,

<script type="text/x-template" id="弹出框组件">
<p class="弹出框">
    <!-- 这里写入布局, 以title为例 -->   
    <p class="样式类">{{title}}</p>
</p>
</script>
<弹出框组件 ></弹出框组件>

  var data = {title: "标题"}
  //表格式表单组件
  Vue.component( "弹出框组件",{
    template: '#弹出框组件',
    data: function(){
      return data;
    },
    ...
  })
  

vue和webpack就不是一个东西………
什么叫使用webpack开发的…………

你可以直接去看比较流行的vue组件源码嘛。
比如这个：对话框
源码在这里：modal

不用webpack，一楼的思路是对的！楼主可以试试！

刚好看到关于一个跟弹窗很相似的思路，你看看：https://segmentfault.com/a/11...