面试准备

搭架子考虑过哪些东西

Git 提交规范

编写代码时候的规范，配置了 ESLint

基础模块的封装和准备（axios 封装）

接口跨域...

考虑过哪些和性能优化的手段

v-for 加 key

v-for 不要和 v-if 用一起

路由懒加载（组件异步加载/异步组件）动态组件

v-if/v-show 区分使用场景

keep-alive（慎重）

CDN

权限控制

1. 登录成功之后，后端返回当前用户的权限标识
2. 前端拿到标识之后，根据标识筛选出有权限的路由，然后做了 2 件事情
3. 第 1 件事件，把筛选出来的动态路由通过 addRoutes 添加到路由实例（router.addRoutes），目的：就可以通过地址栏访问啦
4. 第 2 件事件，把筛选出来的动态路由也添加到了 Vuex 一份，目的：为了在页面当中使用（侧边栏

登录流程

收集数据 => 校验数据 => 发请求把数据传到后端 => 后端处理 => TOKEN => 存到本地（持久化）并同步到 Vuex（方便获取/响应式）

Axios 封装过哪些东西

1. utils/request.js

1. 创建了 axios 实例
const request = axios.create({
  baseUrl,
  timeout
})
// 请求拦截器：统一携带 TOKEN，统一进度条的开启（nprogress）
// 相应拦截器
// 后端告诉 401 了在响应拦截器的错误回调里面做处理

2. api/user.js，请求函数

import request from './utils/request'
export const getUserInfo = () => {
  return request({
    url: '/userinfo',
  })
}

3. 组件.vue

impport { getUserInfo } from './api/user.js'
getUserInfo().then(r => console.log(r))

上传图片

1. 准备 input file 框。

<input type='file' hidden id='oFile' />
<button id="oBtn">上传</button>

2. 点击按钮主动触发 file 框的点击。

oBtn.onclick = function () {
  oFile.click()
}

3. 监听 oFile 的 onchange 事件，在内部拿到数据。

oFile.onchange = function (e) {
  let data = e.target.files[0]
  const f = new FormDate()
  f.append('avatar', data)
}