Vue3教程：開發一個 Vue 3 + element-plus 的后台管理系統

本文轉載自查看原文 2021-03-26 08:28 3207 新蜂商城/ 開源項目/ Vue3/ Vue/ ElementUI/ Vue3.0

最近在開發一個 Vue 3.0 + element-plus 練手項目，后面測試完成后，會把代碼全部開源，部分頁面的預覽圖如下：

本來是這周一發的文章，但是博客園當時在維護，所以今天才發布。

被最初的自己感動

本來不想寫這些話的，翻文章的時候翻到了幾年前寫的一篇舊文，里面記錄了我為什么做開源項目，忽然被那時的自己感動了，於是有了下面這些話，希望大家看一看。

寫了幾年的博客，也做了不少開源項目，最令我感動的不是“牛逼”、“厲害”、“大佬”這樣的評價，因為我不牛逼，我也不是大佬，我更喜歡大家說自己懂了、明白了、學到了，或者有人因為這些項目解決了缺少練手項目的問題，甚至因為這些實戰項目找到了工作、完成了課程作業，這些都讓我覺得我盡力了，奉獻了自己微小的力量幫助別人。

5 年前，我做第一個開源項目的時候，在博客園的一篇文章里就寫過下面這段話：

在博客里我會分享代碼和自己解決問題的方式和方法，也會把項目部署好給大家一個直觀的感受，如果不滿意的話就不用繼續浪費時間去看了，如果覺得還可以，就繼續讀下去，至於我為什么寫了博客，還要公開代碼，還要部署上去，是因為我也是從新手過來的，我知道那種想要學習卻無能為力而不知所措的感覺，因為知識面不廣，因為沒有方向而深深的迷茫和懊惱，這些我都體驗過的，所以我會把能做的都做了，也算是彌補當時自己知識面的空洞的遺憾吧，唉，如果當時。

這就是我做開源項目的原因，因為我也是從新手過來的，我那時候自學 Java，能上手的實戰項目可太少太少了，想要找練習的 demo 都找不到，十分的煎熬。當我有能力做這件事的時候，我就要認真去做，頁面要做的漂亮，功能要做的完整，代碼要全部開源，而不是去學一些垃圾項目，或者去貼吧、論壇、網盤、QQ群里，去求別人分享一個練手的項目。

你們知道，這樣做的時候，一個人的頭可以有多低嗎？

我是知道的。

所以我才做了這些開源項目，技術棧從 SSM 到 Spring Boot，再從 Spring Boot 到 Vue，項目從最初的一個登錄功能，到各種練手項目，簡易的后台管理系統、資訊管理系統、博客項目、商城項目、前后端分離項目，代碼全部開源出來供大家學習。你看，一開始可能沒什么，但是你堅持個 5 年，堅持和積累的作用就顯現出來了。

雖然有時候也被人罵，想想也是挺可笑的。但是今后我依然會走在這條路上，我不是一個大佬，我也沒有多高的技術能力，但是我依然會努力，做更多的開源項目造福社區，我的文章和開源項目最大的作用就是陪大家在技術道路上走上一段路，哪怕不能陪伴你太久，因為你技術能力高了之后，會越來越看不上這些練手項目。

不過，我依然感謝大家讓我陪你們走過這段路。

項目開發背景

言歸正傳，說說最新的這個項目吧。

Vue 3.0 正式版本已上線半年有余，之前在我的專欄里也為大家闡述過一篇關於 Vue 3.0 的文章，Vue 3.0 來了，我們該做些什么？。在當時看來，Vue 3.0 的周邊生態，還不算健全，如路由插件 Vue-Router、狀態管理插件 Vuex、各大組件庫的 Vue 3.0 版本等等，都還處以 beta 版本，甚至有些組件庫都還沒有更新，這讓廣大 Vue 使用者們很難去將自己的項目平穩的遷移至 Vue 3.0。

隨着時間的推移，Vue 的周邊插件開始升級為正式版，幾大知名的 UI 組件庫也都度過的陣痛期，紛紛推出了 Vue 3.0 版本，如 Element-Plus、Ant Design of Vue、Vant 等等，都是業界比較知名的 UI 組件庫，它們作為先驅，為 Vue 生態作出的貢獻有目共睹，在此也希望大家能一起為 Vue 的生態添磚加瓦。

這半年來，我也一直在學習和分享 Vue3 的知識點，比如發布一些 Vue3 的教程：

我也一直在學習和分享 Vue3 的知識點，過程中也寫了一些 Vue3 的教程：

因為做了一些小 Demo，熟悉了之后就開始嘗試寫一些大一點兒的實戰項目，而開發背景當然就是 Vue 3.0 正式發版和 element plus 的正式發版，時間點分別是 2020 年的 9 月份和 2020 年的 11 月份。

項目的名字想了很久也沒想好，先叫它 vue3-admin 吧，畢竟是一個后台管理系統。當然，就當做是一個練手的項目，所有代碼都是開源免費的，供大家學習使用。

vue3-elementplus

項目開發過程

項目 vue3-admin 的開發時間應該是在 2020 年的 12 月份，當時看到 @iamkun 大佬發了一篇文章《🎉 Element UI for Vue 3.0 來了！》，文章里有提到 element plus 正式發版，就想着用它來重構之前的后台管理系統。

不過這次花的時間有點久，到今天為止已經差不多 4 個月了，剛開發完，還在測試階段。因為我的時間比較碎，平時要正常上班、周末還要寫書、寫文章什么的，所以只能在其它事情都忙完、空下來的時候才能寫一點點代碼。

首先是開發后端 API 接口，建表、開發接口、自測.......大概花了半個月時間，把第一版的 API 開發出來。不過，也只是開發出來而已，因為后面聯調接口的時候還是做了很多調整的，參數不完整、接收方式不對、返回的格式調整等等。

之后是開發頁面、聯調接口，這個時間花的就比較多了，搭環境、畫頁面、調整頁面布局、找 icon 素材等等，這些都是費心費時的事情。

比如登錄頁面，一開始畫成了這樣：

第一天看的時候還行，第二天再看的時候就覺得有點不協調，而且背景圖加載的過程有點兒影響體驗，於是把背景改成純色：

看起來還是不協調，主要是色調吧，各種顏色都有，黑的、白的、藍的、青的，還得換，logo 圖片也不好看。調整過程就不啰嗦了，最終的登錄頁面是下面這樣：

刪除了背景色，修改了 logo 圖片和字體顏色，整體上看起來舒服了很多。

開發過程中好玩兒的事情還是有很多的，除此之外，還有三級聯動功能實現、列表功能實現、彈框、圖片上傳、富文本編輯器整合等等，整個項目就是這樣一點一點完成的，從第一行代碼，到第一個組件，到完成一個頁面，再到完成一個功能模塊。現在想一想，其實全部都是笨功夫，靜下心來才能慢慢做好的事情。還好，我這個人比較笨，就一點一點做唄。差不多 11 個頁面組件 + 5 個公用組件，花了幾個月時間，也做完了，繼續努力吧。

還有一些問題，周末測試並集中修改。