引言
因為項目搬磚需要，筆者從 2019 年 11 月份開始學習 Vue.js，在完整地敲了一遍 vue-admin 框架中的用戶管理 Demo 、斷點跟蹤前端調(diào)用流程、并摸清楚了 Vue.js 的開發(fā)套路后，總算可以出師了。
寫作本文有兩個原因，一是對這段時間學習 Vue.js 的過程做一個總結(jié)；另外就是完成自己 2019 下半年在 GitChat 的寫作目標，8 月份曾在一個知識星球公布了下半年寫兩篇 Chat 的目標，遲遲沒有完成。
以上就是本文產(chǎn)生的背景了，再說回到 Vue.js。筆者年初也弄了一陣兒 Angular.js，雖然都是前端框架，感覺 Vue.js 入門更簡單一些，其數(shù)據(jù)驅(qū)動的設(shè)計理念跟 Java 面向?qū)ο缶幊痰乃季S模式相似，所以學起來更輕松。
之所以選擇彈框組件這個話題，是因為筆者參與的新產(chǎn)品中，很多地方都涉及到彈出頁面，所以仔細研究了一下彈框組件的封裝原理，解決了彈出頁面封裝的技術(shù)問題后，筆者這半路前端也能夠應(yīng)付一陣子開發(fā)工作了！
環(huán)境準備
Vue 開發(fā)相關(guān)的工具及其關(guān)系回顧，這里先回憶一下跟 Vue 項目開發(fā)有關(guān)的概念：
名詞
解釋
作用
Vue.js
一個前端框架
用于構(gòu)建用戶界面的漸進式框架
*.vue 文件
一種文件類型
以類 HTML 語法描述一個 Vue 組件
vue-cli
Vue 官方腳手架
對單個 *.vue 文件進行快速原型開發(fā)
eslint
前端代碼檢查工具
編寫高質(zhì)量前端代碼的利器，類似 findbugs
webpack
模塊打包器
類似 maven，將前端項目打包成靜態(tài)資源文件
IDEA Vue.js 插件
IDEA 插件
使 IDEA 能夠支持 Vue 項目開發(fā)
我們在使用 IDEA 開發(fā) Vue 項目時，只需要安裝 Vue.js 插件就可以了，不需要使用 vue-cli 腳手架；引入 ESLint 是為了編寫高質(zhì)量的前端代碼，也可以不用，而且 IDEA 的快速修正功能很強大，不需要完全了解 ESLint 規(guī)范；至于打包工具 webpack，初學完全可以先忽略它。
GitHub 上有一個 Vue 的半成品項目 vueAdmin-template，可以基于它來學習或者二次開發(fā)，本文也是在它基礎(chǔ)上完成一個彈框組件學習案例的。這里使用 IDEA 作為開發(fā)工具，相關(guān)準備工作如下：
IDEA 安裝 Vue.js 插件；
IDEA 安裝 eslint 插件；
IDEA 添加 .vue 文件模板；
IDEA 導(dǎo)入 vueAdmin-template，項目地址。
常見的幾種彈出框類型
Web 開發(fā)過程中常用的彈框，歸納起來，主要有三類：
消息提示框，即 alert，不需要進行操作；
操作確認框，即 confirm，包含“確定”和“取消”按鈕；
頁面彈出框，即 openwindow，彈出一個完整的頁面，用戶輸入信息后，通過“確定”或“取消”提交信息。
第一、二類彈出框，ElementUI 都有封裝，拿來用即可；第三類彈出框，可以結(jié)合 el-dialog 組件完成。 在筆者參與的項目中，彈出頁面的特點在于，父組件彈出子組件后，用戶需要在彈出頁面配置信息、點擊“確定”按鈕提交。
