同志们,免费版的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插件:

提前传入需要改变的颜色变量和值入例如:@primary-color:[#0094ff,#fff,#000等...],然后正在webpack编译时读取这些变量,然后静态生成这些css文件,

优点,1.切换主题时只是加载不同的css文件,节约性能,
缺点:1.耗费服务端空间,2.只能订制提前定义好的几种主题3.需要动态写入要修改的变量名入,@primary-color,@success-colo等,替换不完全

本项目使用了第二种方案,基于vite-plugin-theme插件,

优点
1. 可以任意在生产环境下选择主题颜色; 2. 没有上一中法案的问题3,主题更改比较全面
缺点:

由于是动态生成主题颜色,会有性能损耗
必须先找到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只是为了方便搜索而已

已完成

注册登录vue3 语法
自动生成国际化(多层级文件夹使用.连接,比如tools.UserMenu)
Storage(包含加密)
vueuse响应式判断设备(手机,平板,pc)

TODO

输入命令,生成一个view的模板
加一个锁屏页面
使用reactiveState部分代替vuex
本想使用ant design一样的图标做首页的,但是用到了viser-vue插件,是vue2的,翻译成vue3 太麻烦了,回头再说吧
详尽的文档

浏览器兼容

Edge Chrome 等现代浏览器,目前只测试过Chrome,没有Mac所以Safari没有测试

落魄前端,在线求赞

同志们,免费版的Ant Design Pro Vue3 来啦相关推荐

ant Design Pro 登录状态管理
未登录自动跳转到登录页面,登录成功不跳转回登录页面的实现代码调用流程. ant Design Pro 是一个企业中后台管理框架,开始做他,第一个肯定是要做登录,下面来看一下它是怎么登录的. 先看路由配 ...
Ant Design Pro 网络请求流程
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作 ...
【Ant Design Pro 一】环境搭建，创建一个demo
技术交流qq群 173683895 搭建 Ant Design Pro 的前期准备:你的本地环境需要安装 cnpm.node. 注:代码块中的 $ 代表: $后面是在命令行输入的命令,举例 $ ...
ant design pro （八）构建和发布
一.概述原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...
ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...
Ant Design Pro开发后台管理系统（新增页面）
通过实际demo演示一个管理后台的开发过程知识点: 1.新增router,新增models 新增菜单配置 1.如上图所示,打开/src/common/menu.js可以看到菜单列表其中 menuD ...
ant design pro 页面加载原理及过程，@connect 装饰器
一.概述以列表页中的标准列表为主 Ant Design Pro 默认通过只需浏览器单方面就可处理的 HashHistory 来完成路由.如果要切换为 BrowserHistory,那在 src/in ...
ant design pro 加载慢_ant design pro项目打包后页面加载缓慢
用ant design pro框架做的项目,打包之后每一个页面加载的速度都特别慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImp ...
Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行
学习参考: electron-api-demos 我以下的方式,其实并把Ant Design Pro文件打包到生成的安装包里,所以,安装包=Ant Design Pro+Electron环境 ant- ...