一、基本介绍
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.
五、运行机制:
-
用户访问应用时,路由将用户导向
BasicLayout
。 -
BasicLayout
渲染顶部导航栏和侧边栏。 -
根据用户的路由地址,Vue Router加载对应的页面组件。
-
页面组件可能会通过Vuex进行状态管理,也可能会通过Axios进行HTTP请求。
-
页面加载相关资源和数据,并渲染到页面上。
六、登录流程
src.views.user.Login.Vue页面,输入用户名密码后,点击登录,响应handleSubmit事件;
事件中调用Login方法,跳转到src.store.modules.user.js中的Login;
在Login方法中调用login,跳转到scr.api.login.js中的login,进而调用后端方法