1. 程式人生 > >Vue3教程:開發一個 Vue 3 + element-plus 的後臺管理系統

Vue3教程:開發一個 Vue 3 + element-plus 的後臺管理系統

最近在開發一個 Vue 3.0 + element-plus 練手專案,後面測試完成後,會把程式碼全部開源,部分頁面的預覽圖如下: ![](https://img2020.cnblogs.com/blog/859549/202103/859549-20210324164729600-1645095989.png) > 本來是這週一發的文章,但是部落格園當時在維護,所以今天才釋出。 ## 被最初的自己感動 本來不想寫這些話的,翻文章的時候翻到了幾年前寫的一篇舊文,裡面記錄了我為什麼做開源專案,忽然被那時的自己感動了,於是有了下面這些話,希望大家看一看。 寫了幾年的部落格,也做了不少開源專案,最令我感動的不是“牛逼”、“厲害”、“大佬”這樣的評價,因為我不牛逼,我也不是大佬,我更喜歡大家說自己懂了、明白了、學到了,或者有人因為這些專案解決了缺少練手專案的問題,甚至因為這些實戰專案找到了工作、完成了課程作業,這些都讓我覺得我盡力了,奉獻了自己微小的力量幫助別人。 5 年前,我做第一個開源專案的時候,在部落格園的一篇文章裡就寫過下面這段話: > 在部落格裡我會分享程式碼和自己解決問題的方式和方法,也會把專案部署好給大家一個直觀的感受,如果不滿意的話就不用繼續浪費時間去看了,如果覺得還可以,就繼續讀下去,至於我為什麼寫了部落格,還要公開程式碼,還要部署上去,**是因為我也是從新手過來的,我知道那種想要學習卻無能為力而不知所措的感覺,因為知識面不廣,因為沒有方向而深深的迷茫和懊惱,這些我都體驗過的,所以我會把能做的都做了,也算是彌補當時自己知識面的空洞的遺憾吧,唉,如果當時。** 這就是我做開源專案的原因,因為我也是從新手過來的,我那時候自學 Java,能上手的實戰專案可太少太少了,想要找練習的 demo 都找不到,十分的煎熬。當我有能力做這件事的時候,我就要認真去做,頁面要做的漂亮,功能要做的完整,程式碼要全部開源,而不是去學一些垃圾專案,或者去貼吧、論壇、網盤、QQ群裡,去求別人分享一個練手的專案。 **你們知道,這樣做的時候,一個人的頭可以有多低嗎?** **我是知道的。** ![](https://img2020.cnblogs.com/blog/859549/202103/859549-20210324164740513-1274092984.png) 所以我才做了這些開源專案,技術棧從 SSM 到 Spring Boot,再從 Spring Boot 到 Vue,專案從最初的一個登入功能,到各種練手專案,簡易的後臺管理系統、資訊管理系統、部落格專案、商城專案、前後端分離專案,程式碼全部開源出來供大家學習。你看,一開始可能沒什麼,但是你堅持個 5 年,堅持和積累的作用就顯現出來了。 雖然有時候也被人罵,想想也是挺可笑的。但是今後我依然會走在這條路上,我不是一個大佬,我也沒有多高的技術能力,但是我依然會努力,做更多的開源專案造福社群,我的文章和開源專案最大的作用就是陪大家在技術道路上走上一段路,哪怕不能陪伴你太久,因為你技術能力高了之後,會越來越看不上這些練手專案。 不過,我依然感謝大家讓我陪你們走過這段路。 ![](https://img2020.cnblogs.com/blog/859549/202103/859549-20210324164752711-1082710046.png) ## 專案開發背景 言歸正傳,說說最新的這個專案吧。 `Vue 3.0` 正式版本已上線半年有餘,之前在我的專欄裡也為大家闡述過一篇關於 `Vue 3.0` 的文章,[Vue 3.0 來了,我們該做些什麼?](https://juejin.cn/post/6874604408030789640)。在當時看來,`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 的教程: - [《Vue 3.0 來了,我們該做些什麼?》](https://juejin.cn/post/6874604408030789640) - [《Vue3實戰系列:結合 Ant-Design-of-Vue 實踐 Composition API》](https://juejin.cn/post/6882393804310052871) - [《Vue3 來了,Vue3 開源商城專案重構計劃正式啟動!》](https://juejin.cn/post/6884991023811215374) - [《Vue3實戰系列:Vue3.0 + Vant3.0 搭建種子專案》](https://juejin.cn/post/6887590229692121096) - [《