首先可以去ant design官网找找自己满意的layout比如我们找的是 ![](https://img.kancloud.cn/aa/9c/aa9c65637bae3db45d5910eff3d73e4a_1380x827.png) 将代码全部复制到views下的main.vue组件当中即可 ### ![](https://img.kancloud.cn/b7/7c/b77c5f6633ee4f5bcddc56fb95403a4a_1066x970.png) ### 然后配置一下router路由 ![](https://img.kancloud.cn/24/ec/24ecb00448ced2b049ff2238fb78b332_1129x762.png) ### **vue当中会默认找到/路径进行加载** ### ![](https://img.kancloud.cn/c1/b7/c1b770b522c895fdccc669e7a7c25d89_2474x1072.png) 访问根目录你会发现有两处不对 如上图红色区域（这是我已经调整过的了） 需要对样式做如下调整 ![](https://img.kancloud.cn/3b/ce/3bce4023403861d8f27baabfc1866986_1201x961.png) ![](https://img.kancloud.cn/81/36/813661af2b07ecbeeb8d187e88ebd04e_949x430.png) ### 然后修改login.vue登陆成功之后直接跳转到/路径 所以的需要加载router路由组件 ![](https://img.kancloud.cn/99/c3/99c31f148e3001d4af847c527cf5f16a_908x888.png) ![](https://img.kancloud.cn/7c/5d/7c5d89582173c0bd15b8198639ab7fef_924x596.png)