我们先看一下路由 有静态导入和懒加载两种方式 我们基本都是在采用懒加载的方式 ![](https://img.kancloud.cn/f1/03/f103608f828f71a7d61caf8c5dc59c63_1916x858.png) ### ![](https://img.kancloud.cn/bb/17/bb17f9f7823849c4ef1a9df1b2a160e7_768x700.png) ### 然后我们再去创建login.vue登陆页面 ![](https://img.kancloud.cn/0b/e1/0be183081ab04136183e0c1ddea947dc_1183x996.png) ### 用到了删格化Gride ![](https://img.kancloud.cn/9a/97/9a97ad4a6a6b755a92f6a546beee0a49_2988x1702.png) 然后还用到了form表单 ![](https://img.kancloud.cn/f9/42/f94224005fae80d568f7789a6484be67_3318x1676.png) ### ![](https://img.kancloud.cn/da/7a/da7addd416e83600e8f78c8eefba263f_985x920.png) ### **在能够发起网络请求之前我们需要安装组件axios 在项目根目录下执行命令** `npm install axios@1.3.2` ![](https://img.kancloud.cn/2e/3f/2e3ff68b9f011d02d6e229b07db7049d_672x884.png) ### ![](https://img.kancloud.cn/cc/18/cc18089a1285576454bdce5780fc0f9c_1070x760.png) ### ![](https://img.kancloud.cn/33/cb/33cbf422c6857b8d9764693166ecc115_2330x1118.png) ### ![](https://img.kancloud.cn/13/83/13831a6a04364c95706cba7d218edfcd_2404x1036.png) ### ![](https://img.kancloud.cn/01/af/01afab4a60f1dbafd14911965acba81f_1424x565.png) ### 主要还是掌握套路！！！