同志們,免費版的Ant Design Pro Vue3 來啦!

Vue3也出了一段時間了,於是照着ant pro vue搭個免費的vue3版

希望大家喜歡

 

基於 Vite2 Vue3 Ant-Design-of-Vue2 TS實現的 Ant Design Pro

預覽圖

首頁

夜間模式

手機預覽(最低支持iphone4)

 

項目下載和運行

#拉取項目代碼

git clone https://github.com/bailihuiyue/ant-design-pro-vue3.git

cd ant-design-pro-vue3

#安裝依賴 yarn install

#開發模式運行 yarn dev

#編譯項目 yarn build

路由和菜單

基本結構

• 路由文件 通過約定的語法根據在 router.ts 中配置路由,
• 后端路由:通過defaultSettings.ts中的useAsyncRouter來設置是否啟用,后端路由的格式在mockUtils.ts的userNav中。
• 后端路由對應的component自動引入邏輯在batchImportFiles,會自動引入view下面的,vue文件作為頁面
• 普通路由參照exampleRouterMap

 

• 菜單生成根據路由配置來生成菜單。菜單項名稱，嵌套路徑與路由高度耦合,具體配置內容參照Ant Design Pro Vue即可
• 菜單跳轉第三方網址的寫法meta: { title: 'user.login.login', icon: 'account-book', target: 'http://www.baidu.com', blank: false }如果不想在新窗口打卡,請寫明blank: false否則blank不寫或者任意值均表示true

布局

• 布局沒有采用新版pro-layout插件,因為二次封裝不利於個性化定制,而且pro-layout全是用jsx寫的,所以還是使用了ant-pro 2.0的代碼去修改

新增頁面

• 項目結構采用了類似ant design pro(react版本)的模塊化結構,這樣其他項目使用時直接復制文件夾即可,省去了在不同文件加分別找文件的痛苦了
• 模板在template文件夾中 ├helper.ts 工具文件,等同於utils ├Index.vue 頁面文件 ├service.ts 用於存放接口內容 ├types.ts 聲明ts類型使用 ├ 國際化文件 │ ├cn.ts 中文 │ └en.ts 英文

和服務端進行交互

• 項目使用了apite作為mock工具,文件寫在了/mock文件夾中

業務圖標

• 圖標除了 Ant Design Vue 自帶的圖標以外還使用了 vite-plugin-svg-icons 插件緩存svg,所有圖標都放在src/assets/icons中
• 想使用antv自帶的圖標請拷貝node_modules@ant-design\icons-svg\inline-svg到圖標文件夾,會自動引入,名稱為 文件夾名-文件名 例如a下的b.svg,SvgIcon組件傳入name="a-b"即可:
  想獲取所有已添加的icon:
  import ids from 'virtual:svg-icons-names';
  // => ['icon-icon1','icon-icon2','icon-icon3']
  這個插件是自動導入的,然后寫到body上,如果圖標過多覺得影響效率可以使用vite-plugin-vue-svg,手動引入一個個圖標,demo在SvgIcon/manual中
  注意:svg文件的 標簽上必須有 fill="currentColor" 字段,這樣才能從外部的span等標簽修改顏色,否則顏色不可變

國際化

• 國際化使用了i18n 9的版本,由於該版本不識別.組成的key,所以程序用為了兼用使用replaceDot方法進行了一層循環,影響項目性能,並且禁止寫成 'a':'xx','a.b':'xxxx'這種形式,因為無法生成對象,因此國際化不推薦寫成 'list.search-list.articles': '搜索列表（文章）',推薦寫成{a:{b:{c:'xxx'} } }

更換主題

• 項目使用了vite-plugin-theme產生主題(css)
• 目前可以支持自動切換主題,包括生產模式,
• 通過調研,發現antv(element 有官方支持)目前主流切換主題有兩種模式,並且都需要webpack/vite插件:

1. 提前傳入需要改變的顏色變量和值入例如:@primary-color:[#0094ff,#fff,#000等...],然后正在webpack編譯時讀取這些變量,然后靜態生成這些css文件,

• 優點,1.切換主題時只是加載不同的css文件,節約性能,
• 缺點:1.耗費服務端空間,2.只能訂制提前定義好的幾種主題3.需要動態寫入要修改的變量名入,@primary-color,@success-colo等,替換不完全

 

1. 本項目使用了第二種方案,基於vite-plugin-theme插件,

• 優點
  1. 可以任意在生產環境下選擇主題顏色; 2. 沒有上一中法案的問題3,主題更改比較全面
• 缺點:

1. 由於是動態生成主題顏色,會有性能損耗
2. 必須先找到antv主顏色的色號,否則替換主題功能失效,所以當antv主色更改時,需要代碼中跟着一起更改,建議鎖定antv版本,避免該問題;

• 猜測原理,根據該插件說明和代碼運行現象猜測,是以主顏色生成幾個臨近顏色然后對應找到整個項目中包含這些顏色的css樣式然后對比替換比如原來是[a,b,c,d],現在是[1,2,3,4],那么a變成1,b變成2這樣對應着替換,然后把提換完成的css寫入到body底部,完成主題切換,不需要根據@primary-color這種定義去查找,這樣靠顏色替換比較完整

 

 

黑夜模式目前使用了antv官網的黑夜css,采用動態添加link完成,不能適配所有頁面,因此在darkModePatch.less寫下一些兼容樣式

權限管理

• 權限管理在路由文件的meta.permission中設置,可以是一個數組,也可以不寫,不寫表示任意權限即可
• 后端路由的話一般不用設置權限,傳來什么就是什么

其他說明

• 項目為了保持了ant vue pro樣式一致,部分代碼引用自ant vue pro,如global.less,部分插件和原理借鑒vben,感謝兩位大大
• 當前 <script setup lang="ts"></script>有bug,會導致.ts文件無法引入,報錯 The requested module '/src/views/user/ty.ts' does not provide an export named 'FormState'
• 文檔里有一些注釋,搭配vscode插件better-comments食用,風味更佳: 注釋TODO: 待完成 bug:todo: bug info:todo: 發現的一些情況 warn:todo: 可能有bug ques:todo: 疑問 只有大寫的'TODO'才表示未完成的功能,小寫的todo只是為了方便搜索而已

已完成

1. 注冊登錄vue3 語法
2. 自動生成國際化(多層級文件夾使用.連接,比如tools.UserMenu)
3. Storage(包含加密)
4. vueuse響應式判斷設備(手機,平板,pc)

TODO

1. 輸入命令,生成一個view的模板
2. 加一個鎖屏頁面
3. 使用reactiveState部分代替vuex
4. 本想使用ant design一樣的圖標做首頁的,但是用到了viser-vue插件,是vue2的,翻譯成vue3 太麻煩了,回頭再說吧
5. 詳盡的文檔

瀏覽器兼容

Edge Chrome 等現代瀏覽器,目前只測試過Chrome,沒有Mac所以Safari沒有測試

落魄前端,在線求贊