Vue学习(6) Ant-design-vue-pro手把手搭建(1)

首先创建一个使用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