Ant Design Vue Pro流程分析记录

一、基本介绍

        Ant Design Vue Pro提供了一套完整的解决方案，包括路由、状态管理、UI组件库、HTTP请求封装等，方便开发者快速搭建和维护企业级应用。

二、官网地址

      Ant Design Pro of Vue

三、下载及安装

        推荐使用Yarn

 四、文件分布及说明

dist：发布时产生文件的目录

node_modules:官方和第三方组件所在目录（一般无需修改，如有修改需要注意会被覆盖）

public:公共资源目录

scr：主要代码目录

        api:走向后端的路由目录，其中login.js是登录相关，manage.js是基本管理相关；

        components:组件目录，自定义组件可放到此目录；

        config:配置文件，其中defaultSetting.js项目基本配置，譬如项目名称；

                                     router.config.js登录后主界面静态展示的菜单及路径；

         mock:静态资源，不连后端时常用；

         router:路由，动态生成界面展示路由；

         store:类似于控制器，即主体逻辑在此目录下实现，譬如动态路由的调用，登录接口的调用及逻辑处理；

         utils:工具包

         views:视图，界面展示代码

         tests:测试目录

package.json:组件及其版本等文件，其中：

调试下面部分影响了后续运行使用的命令，譬如，运行时使用yarn run serve中的serve指的就是这里的serve.

五、运行机制：

1. 用户访问应用时，路由将用户导向BasicLayout。

2. BasicLayout渲染顶部导航栏和侧边栏。

3. 根据用户的路由地址，Vue Router加载对应的页面组件。

4. 页面组件可能会通过Vuex进行状态管理，也可能会通过Axios进行HTTP请求。

5. 页面加载相关资源和数据，并渲染到页面上。

六、登录流程

src.views.user.Login.Vue页面，输入用户名密码后，点击登录，响应handleSubmit事件；

事件中调用Login方法，跳转到src.store.modules.user.js中的Login；

在Login方法中调用login，跳转到scr.api.login.js中的login,进而调用后端方法