Ant Design Vue Pro

基于 Vite4 Vue3 Ant-Design-of-Vue2 TS 实现的 Ant Design Pro Vue

码云地址: https://gitee.com/Onces/ant-design-pro-vue3

预览图

首页

个人中心

夜间模式

锁屏界面

可点击右下角锁头按钮进行解锁

流程图

Echarts设计器

目前有柱状图,折线图,饼图,自定义图,不同的图有不同的setting,代码文件也是分开的,可自行扩展

手机预览(最低支持iphone4)

项目下载和运行

#拉取项目代码
git clone https://github.com/bailihuiyue/ant-design-pro-vue3.git
cd ant-design-pro-vue3
#安装依赖
yarn install
#开发模式运行
yarn dev 不带开发球
yarn dev-ui 带开发球
#编译项目
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文件夹中