引言
因为项目搬砖需要，笔者从 2019 年 11 月份开始学习 Vue.js，在完整地敲了一遍 vue-admin 框架中的用户管理 Demo 、断点跟踪前端调用流程、并摸清楚了 Vue.js 的开发套路后，总算可以出师了。
写作本文有两个原因，一是对这段时间学习 Vue.js 的过程做一个总结；另外就是完成自己 2019 下半年在 GitChat 的写作目标，8 月份曾在一个知识星球公布了下半年写两篇 Chat 的目标，迟迟没有完成。
以上就是本文产生的背景了，再说回到 Vue.js。笔者年初也弄了一阵儿 Angular.js，虽然都是前端框架，感觉 Vue.js 入门更简单一些，其数据驱动的设计理念跟 Java 面向对象编程的思维模式相似，所以学起来更轻松。
之所以选择弹框组件这个话题，是因为笔者参与的新产品中，很多地方都涉及到弹出页面，所以仔细研究了一下弹框组件的封装原理，解决了弹出页面封装的技术问题后，笔者这半路前端也能够应付一阵子开发工作了！
环境准备
Vue 开发相关的工具及其关系回顾，这里先回忆一下跟 Vue 项目开发有关的概念：
名词
解释
作用
Vue.js
一个前端框架
用于构建用户界面的渐进式框架
*.vue 文件
一种文件类型
以类 HTML 语法描述一个 Vue 组件
vue-cli
Vue 官方脚手架
对单个 *.vue 文件进行快速原型开发
eslint
前端代码检查工具
编写高质量前端代码的利器，类似 findbugs
webpack
模块打包器
类似 maven，将前端项目打包成静态资源文件
IDEA Vue.js 插件
IDEA 插件
使 IDEA 能够支持 Vue 项目开发
我们在使用 IDEA 开发 Vue 项目时，只需要安装 Vue.js 插件就可以了，不需要使用 vue-cli 脚手架；引入 ESLint 是为了编写高质量的前端代码，也可以不用，而且 IDEA 的快速修正功能很强大，不需要完全了解 ESLint 规范；至于打包工具 webpack，初学完全可以先忽略它。
GitHub 上有一个 Vue 的半成品项目 vueAdmin-template，可以基于它来学习或者二次开发，本文也是在它基础上完成一个弹框组件学习案例的。这里使用 IDEA 作为开发工具，相关准备工作如下：
IDEA 安装 Vue.js 插件；
IDEA 安装 eslint 插件；
IDEA 添加 .vue 文件模板；
IDEA 导入 vueAdmin-template，项目地址。
常见的几种弹出框类型
Web 开发过程中常用的弹框，归纳起来，主要有三类：
消息提示框，即 alert，不需要进行操作；
操作确认框，即 confirm，包含“确定”和“取消”按钮；
页面弹出框，即 openwindow，弹出一个完整的页面，用户输入信息后，通过“确定”或“取消”提交信息。
第一、二类弹出框，ElementUI 都有封装，拿来用即可；第三类弹出框，可以结合 el-dialog 组件完成。 在笔者参与的项目中，弹出页面的特点在于，父组件弹出子组件后，用户需要在弹出页面配置信息、点击“确定”按钮提交。
