"修身，齊家，治國，平天下。這是儒家奉行的人生之道，也是我們現代人所所求的境界。當我們邁出腳步的時候，需要征服一座山，那就是我們自己"

--出自《稻盛和夫給年輕人的忠告》

01

前

一直以來想找個合適的機會寫一寫關于VueAdminWork的整體框架原理以及一細節。前期覺得還是不太成熟，而且也沒準備好要怎么寫。今天打算試寫一篇關于VueAdminWork的整體框架設計。寫的不好還請各們小伙伴見諒

以下的說明是VueAdminWorkP（Vue3 + Vite2 + NaiveUI + Typescript）版本為例來進行介紹的

02

VueAdminWork框架的設計初衷和說明

很多用過后臺管理系統的小伙伴一定會有一個感覺就是要么功能少，要么頁面不美觀。或多或少都會存在這樣那樣的問題，其實我有使用別人的后臺管理模板的時候也是一樣的感覺。

所以就下定決心要自己搞一款屬于自己的后臺管理系統，不僅如此，要盡可能的兼顧到大部分人的需求。但是由于個人能力始終有限，VueAdminWork框架到現在還有很多很多需要完善的地方。在今后的時間，我會繼續努力去完善給大家帶來更好的開源作品。

做這樣一款框架也是對自己的知識體系的沉淀，在這過程也學習到了很多很多知識。中間也曾想到放棄，但是咬牙堅持到了最后，還好沒有放棄。

VueAdminWork框架發展至今已經有6款不同技術架構的版本。其實目前開源了4款。另一款基于Antd的版本也準備開源。

這里面我要重點說明一下，VueAdminWork全部都是由我本人一點點代碼寫出來的，從一個簡單的html頁面項目，一點點發展到現在的體系。

絕對不是隨便從網上下載一個模板改改樣式改改文字就變成自己的了。

這樣的行為是讓人不恥的。

03

VueAdminWork運行原理和模型

VueAdminWork和一個普通的項目一樣，入口也是 main.ts 或者 main.js 。也存在一個 App.vue組件。

可以看成一個普通的Vue項目

App.vue代碼如下：

是不是很簡單……

框架本身的運行原理也是非常簡單的，用下面一張圖就可以清楚的表示

在整體的架構上，設計的構思就是框架由一個個組件組合來成，這樣便于后期的維護和替換。

VueAdminWork采用了兩級路由，從而對應兩級視圖渲染的方式。如下

最外層的路由對應的組件是: Layout。

Layout對應的模板代碼如下：

同時，為了適配移動端，Layout還有很多關于 移動端的代碼。這里不多介紹關于移動端的適配情況了。

Layout組件是整個項目運行的骨架和載體。根據用戶的配置來進行切換不同的布局模式。是最重要的一個組件

每個組件負責不同的功能，比如：

SideBar 只負責顯示 菜單列表

TabBar只顯示已經訪問過的頁面標題

NavBar只顯示頁面導航相關的功能

……

正是因為這樣一個個的小組件，最終組合在一起形成框架的基本的模型。

工作區Main.vue

而我們平時用的最多的就是工作區（也就是第二級路由頁面），是由 Main.vue實現，代碼如下：

這樣就可以根據瀏覽器中不同的路徑來實現不同的頁面切換

04

結尾

到此，VueAdminWork的整體架構和運行原理就給大家介紹到這里，可能還有很多地方沒有講明白，我會再進行補充。等下期我們再見