腾讯架构师带我写代码 —— vue真实企业实战分享

Vue.js+element ui构造后台管理系统

• • 阅读本文你会收获些什么？
  • 项目预览
  • 项目技术栈概览
  • 1. 路由配置
  • 2. 登录页配置
  • 3. API层配置（接口配置）
  • 4. 跨域处理
  • 5. 可以愉快的调接口了
  • 6. main.js中 你需要的配置
  • 7. 配置路由拦截
  • 8. 全局方法配置
  • 9. 父页面配置（home.vue）
  • 10. FAQ：你可能会碰到的问题及解决方案

阅读本文你会收获些什么？

1. 不玩虚的，真实的企业项目实战技巧，可以直接拿过去用
2. 真实的接口调用，实现相关功能
3. 优秀的封装技巧（本项目在前腾讯前端架构师指导下构建）
4. 帮你踩坑，让你开发更加顺畅
5. 提供脱敏化的所有代码，让你不会存在一知半解

项目预览

• 登录页效果
  

• 登录时过渡效果
  

• 登录成功，跳转页面

• 左侧导航与右侧表格效果
  

• 你看到的是一个标准的后台管理系统

• 简洁的页面后面有强大的代码支持，请继续往下看

项目技术栈概览

• 开发工具：vscode（推荐使用的前端开发工具）
• Vue版本：V 2.6.11
• vue-router：V 3.2.0
• element ui版本：V 2.15.1
• 接口调试：axios库 V 0.21.1
• vue-cli（脚手架）版本: V 4.5.0
• node版本：V 13.14.0
• node-sass：V 4.12.0
• sass-loader：V 8.0.2
• babel-eslint：V 10.1.0

1. 路由配置

router文件夹下，index.js 配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requireAuth: true
    },
    children: [
      // 学生数据
      {
        path: '/home/studentData',
        name: 'studentData',
        meta: {
          requireAuth: true
        },
        component: () => import('../views/studentData/studentData.vue')
      },
      // 老师数据
      {
        path: '/home/teacherData',
        name: 'teacherData',
        meta: {
          requireAuth: true
        },
        component: () => import('../views/teacherData/teacherData.vue')
      },
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/login.vue'),
    // 子路由
    children: [

    ]
  }
]
// 多次点击同一个导航时会报错，所以添加了这段代码
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
  routes
})
// 别的地方会用到 router，所以将它导出去
export default router

• 说明：因为此类项目只有中间表格部分会切换，所以路由配置采用的是：父子路由模式
• 一个父路由：home.vue，包含：1. 左侧导航，2. 头部信息栏，3.表格部分的容器
• view文件目录配置如下：（如果你不太熟练，先跟着我的配置走）
  

2. 登录页配置

login.vue（当前是纯静态页面，稍后添加接口与方法）

<template>
  <div class="login-box">
    <div class="form-con">