vue 封装dialog_Vue 弹出框组件的完整封装过程

引言

因为项目搬砖需要，笔者从 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

前端代码检查工具

编写高质量前端代码的利器，类似 f