作为一名萌新, Vue 项目看不懂怎么破? 超详细vue案例解析 不怕入不了门

唠两句

如今, 正值毕设的高潮, 笔者也是应接不暇; 我想一个高逼格的毕设框架的选取: 前端少不了Vue/React后端少不了SpringBoot

vue虽然逼格高, 入门也不容易啊; 刚从gitee拉的一个项目, 修改一个动全身,各种报错, 死活理不清内部逻辑到底怎么回事
---- 来自n位童鞋的哭诉(程序员哭起来, 老惨了)

好了, 笔者最近正好打算梳理vue系列东西,今天就先打个样吧

建议你先从网上找一个比较 完成的vue项目

---

划重点 别走眼

• before

  vue项目在看的时候, 首先明确一个思路: 既然作为vue是前后端分离的产物,那么首先要看看vue是怎么分离的: 先给出结论, 稍后具体描述 (别急)

  vue项目分析流程:
  前端: vue项目在执行如下指令后, 会经历如下图的过程 切记

  npm run dev
  

  喂, 醒醒 切记这个流程

  • 整体概览(这个有个印象就行)
    

  • 整体处理逻辑(必须熟悉)
    
    
    

  下面开始套这个流程 来全图分析一下整个登录过程

1. main.js 加载路由信息, 状态管理, 语言国际化, 渲染APP.vue
   

2. Permission.js鉴权并寻找默认路由

   第一次肯定进入登录路由 往后走默认首页路由

   

3. 进入Login.vue, 输入用户密码 发起登录
   

4. 上一步Login方法经过4个阶段
   4.1 进入store目录调用Login方法
   

   4.2 进入api目录调用login方法
   

   4.3 向后台发起真正登录请求(mock)
   
   4.4 mock处理完毕层层返回给到Login.vue

   返回之前会在store的接受返回中 对token进行全局缓存 便于后面的请求不需要继续登录
   

   登录成功 跳转

   1. 进入permission.js

      所有的请求首先都会进行权限校验 这是毫无疑问的

      

   2. 由于已经登录过 所以直接请求router的路由名为 ‘/’

      注意: 此时的路由信息在内存中, 也就是permission.js调用GenerateRoutes方法时拼接了基础路由和其他带权限路由
      '/'就在带权限路由里

      
      

      在拼接基础路由和带权限路由中 会调用config目录获取带权限的路由

      
      最终 找到路由’/'进行访问 此后逻辑就是大同小异了, 可以发现即使找到了/也是经过了层层重定向访问

---

实际开发怎么做?

其实vue项目确实蛮复杂的, 上面只是为了帮大家理清整个前端和后端的请求流程和返回是怎样的, 不过我们实际开发中,
仅仅需要关心api、views、router、store四个目录即可， 开发时往里面填代码就行了， 如果遇到问题就可以直接根据登录思路
快速查找问题根源

必备知识

至少要把vue的基础教程看完 然后去学习vuex 学完这些就能进行真正的开发了, 想直接修改就完事的, 你一定会被一堆错误笼罩在被支配的恐惧中, 所以好好学一下vue吧

引路人收工 吃饭（老规矩，莫要白票！）