Tailwind CSS

1. 为什么需要使用Tailwind CSS，解决了哪些问题。

Tailwind 就是把样式css 原子化，比如字体大小

.fn12 {
  font-size: 12px;
}

这样就可以定制化和复用样式

优点：

自由度比较高和可定制化比较高

缺点：

学习成本比较高，每个类名需要记住，上手成本比较高

建议：

可以在项目中渐进式的使用，觉得合适就使用，或者直接自己封装常用的css来使用，比如我在项目中就会把字体的大小封装成几个固定的css样式，比如fn12，fn14，fn20。

路由处理

vue项目一般使用vue-router的history模式

1. vue-router history模式 为什么需要服务端配置以及如何配置？

vue-router 已经接收了vue 的单页面应用的路由处理，那么为什么还需要去配置服务端呢？如果不配置，是不是也可以？

这里的原因是vue-rotuer接收了vue项目单页面应用在不刷新的时候的路由处理，如何当切换到某个子路由的时候，假设现在刷新页面，此时就会去服务端去请求资源，所以如果不配置服务器，就会出现404

主题切换

主题切换就是通过切换body或者html的css样式配合var 来进行主题切换

tailwindcss 也是同样的道理

// dark 就表示暗黑模式下的样式
<div dark:hover:bg-zinc-900></div>

跟随系统的主题进行显示，

// 通过window.matchMedia查看系统的主题，然后改变
matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
// 监听主题变更
matchMedia.onchange = function () {
  changeTheme(THEME_SYSTEM)
}
document.querySelector('html').className = matchMedia.matches ? 'dark' : 'light'

瀑布流

类似于这种瀑布流，关键就是如何判断前面的图片是高度最小的图片?

其实就是需要记录前面图片等待加载完成以后，动态去获取当前图片的高度，然后保存起来，然后再动态定位每张图片的位置。

滚动加载如何实现呢？

采用vueuse 中的useIntersectionObserver 或者是使用原生的IntersectionObserver 来确定什么时候需要加载下一页的数据

什么是图片懒加载？

图片可见的时候，不加载图片，图片可见的时候，加载图片

import { useIntersectionObserver } from "@vueuse/core";

export default {
  mounted(el) {
    // 1. 拿到当前 img 标签的 src
    const imgSrc = el.src;
    // 2. 把 img 标签的 src 替换为本地地址
    el.src = "";

    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
      // 图片可见的时候
      if (isIntersecting) {
        // 加载图片
        el.src = imgSrc;
        // 停止监听图片是否可见
        stop();
      }
    });
  },
};

第三方登录

1. 首先网站跳转到第三方登录
2. 如果第三方登录成功之后，会跳转回网站

RBAC 功能

RBAC是什么？

其实就是不同的角色拥有不同的权限。

RBAC 设计的功能点如下:

1. 用户管理指定角色，比如某位员工升职了，现在变成了部门经理，需要给该用户重新分配角色。
2. 需要给角色分配权限，比如微信群主可以拉新人进来。