首先创建一个使用ant-designUI框架的项目,创建过程见https://blog.csdn.net/qq_41957257/article/details/105322193,根据这个过程,项目已经包括less处理器、Jest单元测试等功能,还可实现按需加载。下面,我们就在这个的基础上逐步搭建Vue版的ant-design-pro。
一.可扩展性路由创建
ant-design-pro包括如下模块:
- Dashboard
- 分析页
- 监控页
- 工作台
- 表单页
- 基础表单页
- 分步表单页
- 高级表单页
- 列表页
- 查询表格
- 标准列表
- 卡片列表
- 搜索列表(项目/应用/文章)
- 详情页
- 基础详情页
- 高级详情页
- 结果
- 成功页
- 失败页
- 异常
- 403 无权限
- 404 找不到
- 500 服务器出错
- 个人页
- 个人中心
- 个人设置
- 图形编辑器
- 流程图编辑器
- 脑图编辑器
- 拓扑编辑器
- 帐户
- 登录
- 注册
- 注册成功
每个模块在项目中都在Views下有一个文件夹与之相应,我们就实现其中五个模块,如下所示
相应地,也对应一段路由,如dashboard模块就对应于/dashboard,用户模块就对应于/user,同时为了逻辑清晰,每个模块下的各个页在路由上都作为模块的孩子路由,如用户模块的路由写法如下:
{
path: "/user",
component: () =>
import(/* webpackChunkName: "layout" */ "../layouts/UserLayout"),
children: [
{
path: "/user",
redirect: "/user/login"
},
{
path: "/user/login",
name: "login",
component: () =>
import(/* webpackChunkName: "user" */ "../views/User/Login")
},
{
path: "/user/register",
name: "register",
component: () =>
import(/* webpackChunkName: "user" */ "../views/User/Register")
},
{
path: "/user/register-result",
name: "register.result",
component: () =>
import(
/* webpackChunkName: "user" */ "../views/User/RegisterResult"
)
}
]
用户模块路由是/user,我们采用用户布局(后面实现),其下面的页l路由都作为用户模块的孩子,如登录就是/user/login,对应User文件夹下的Login组件,这样的好处是非常清晰,而且如果你想在用户模块下增加新的页面,路由扩展起来就非常方便,只需将新页面的路由放到children里即可。
这里还写了一个重定向,即如果你输入/user就会重定向到/user/login中。
其他的路由写法也类似,代码如下:
import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
component: () =>
import(/* webpackChunkName: "layout" */ "../lay