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,进而调用后端方法

相关推荐
小溪彼岸3 分钟前
一键切换Cluade、Codex供应商配置,CC Switch你值得一试
前端
2501_916008898 分钟前
API接口调试全攻略 Fiddler抓包工具、HTTPS配置与代理设置实战指南
前端·ios·小程序·https·fiddler·uni-app·webview
Coder-coco10 分钟前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·vue.js·spring boot·小程序·论文·毕设·电子点餐系统
Halo_tjn12 分钟前
Set集合专项实验
java·开发语言·前端·python
m0_5649149215 分钟前
EDGE浏览器如何在新标签页打开收藏?EDGE浏览器如何打开书签不覆盖原网页?如何默认在新建标签页打开收藏夹书签?
前端·edge
司铭鸿29 分钟前
图论中的协同寻径:如何找到最小带权子图实现双源共达?
linux·前端·数据结构·数据库·算法·图论
风宇啸天1 小时前
令牌桶按用户维度限流
前端
safestar20121 小时前
React 19 深度解析:从并发模式到数据获取的架构革命
前端·javascript·react.js
越努力越幸运5081 小时前
npm常见问题解决
前端·npm·node.js
Wild~~1 小时前
electron-vite
前端·javascript·electron