1、若依VUE代码结构:官方文档+资料+总结

  • Post author:
  • Post category:vue


来自官方文档

├── build // 构建相关

├── bin // 执行脚本

├── public // 公共文件

│ ├── favicon.ico // favicon图标

│ └── index.html // html模板

│ └── robots.txt // 反爬虫

├── src // 源代码

│ ├── api // 所有请求

│ ├── assets // 主题 字体等静态资源

│ ├── components // 全局公用组件

│ ├── directive // 全局指令

│ ├── layout // 布局

│ ├── plugins // 通用方法

│ ├── router // 路由

│ ├── store // 全局 store管理

│ ├── utils // 全局公用方法

│ ├── views // view

│ ├── App.vue // 入口页面

│ ├── main.js // 入口 加载组件 初始化等

│ ├── permission.js // 权限管理

│ └── settings.js // 系统配置

├── .editorconfig // 编码格式

├── .env.development // 开发环境配置

├── .env.production // 生产环境配置

├── .env.staging // 测试环境配置

├── .eslintignore // 忽略语法检查

├── .eslintrc.js // eslint 配置项

├── .gitignore // git 忽略项

├── babel.config.js // babel.config.js

├── package.json // package.json

└── vue.config.js // vue.config.js

来自菜鸟教程

在这里插入图片描述

在这里插入图片描述

初始—登陆页面,关联位置

在这里插入图片描述

(1)login.vue ->handleLogin()->validate 提交表单,校验,调用store/user.js->Login({ commit }, userInfo)

(2)全局管控store/user.js->Login(),调用api/login.js->login(username, password, code, uuid)

(3)请求接口api/login.js->login(),请求前utils/request.js->service.interceptors.request.use()请求拦截器

(4)请求拦截器service.interceptors.request.use(),设置token,utils/auth.js

(5)请求接口api/login.js->login()发起请求

(6)响应拦截器验证响应信息没有问题后,就会通过路由修改路径到index.vue



版权声明:本文为qq_43474780原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。