引言

因為項目搬磚需要，筆者從 2019 年 11 月份開始學(xué)習(xí) Vue.js，在完整地敲了一遍 vue-admin 框架中的用戶管理 Demo 、斷點跟蹤前端調(diào)用流程、并摸清楚了 Vue.js 的開發(fā)套路后，總算可以出師了。

寫作本文有兩個原因，一是對這段時間學(xué)習(xí) Vue.js 的過程做一個總結(jié)；另外就是完成自己 2019 下半年在 GitChat 的寫作目標(biāo)，8 月份曾在一個知識星球公布了下半年寫兩篇 Chat 的目標(biāo)，遲遲沒有完成。

以上就是本文產(chǎn)生的背景了，再說回到 Vue.js。筆者年初也弄了一陣兒 Angular.js，雖然都是前端框架，感覺 Vue.js 入門更簡單一些，其數(shù)據(jù)驅(qū)動的設(shè)計理念跟 Java 面向?qū)ο缶幊痰乃季S模式相似，所以學(xué)起來更輕松。

之所以選擇彈框組件這個話題，是因為筆者參與的新產(chǎn)品中，很多地方都涉及到彈出頁面，所以仔細(xì)研究了一下彈框組件的封裝原理，解決了彈出頁面封裝的技術(shù)問題后，筆者這半路前端也能夠應(yīng)付一陣子開發(fā)工作了！

環(huán)境準(zhǔ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，初學(xué)完全可以先忽略它。

GitHub 上有一個 Vue 的半成品項目 vueAdmin-template，可以基于它來學(xué)習(xí)或者二次開發(fā)，本文也是在它基礎(chǔ)上完成一個彈框組件學(xué)習(xí)案例的。這里使用 IDEA 作為開發(fā)工具，相關(guān)準(zhǔn)備工作如下：

IDEA 安裝 Vue.js 插件；

IDEA 安裝 eslint 插件；

IDEA 添加 .vue 文件模板；

IDEA 導(dǎo)入 vueAdmin-template，項目地址。

常見的幾種彈出框類型

Web 開發(fā)過程中常用的彈框，歸納起來，主要有三類：

消息提示框，即 alert，不需要進行操作；

操作確認(rèn)框，即 confirm，包含“確定”和“取消”按鈕；

頁面彈出框，即 openwindow，彈出一個完整的頁面，用戶輸入信息后，通過“確定”或“取消”提交信息。

第一、二類彈出框，ElementUI 都有封裝，拿來用即可；第三類彈出框，可以結(jié)合 el-dialog 組件完成。 在筆者參與的項目中，彈出頁面的特點在于，父組件彈出子組件后，用戶需要在彈出頁面配置信息、點擊“確定”按鈕提交。