vue-pure-admin项目的学习

前言

感谢作者的开源，让我们有机会学习
项目地址： vue-pure-admin
只是记录自己的学习，有问题地方感谢指正
只会记录一些自己目前感觉有用的知识点
代码demo都是基于vue3、ts、element plus

目录结构

-src
 --api			存放与请求有关的文件
 --assets		存放静态文件（图标、文字）
 --components	存放全局公共组件
 --config		项目配置
 --directives	全局指令
 --layout		全局布局
 --plugins		插件
 --router		路由
 --store		vuex
 --style		全局样式
 --utils		全局工具方法
 --views		页面

登录页

登录页小功能

项目效果如下，感觉挺不错的

demo

<template>
  <div class="login">
    <div class="user">
      <div ref="nameRef" class="user_name">用户名</div>
      <input
        class="input"
        type="text"
        v-model="userName"
        @focus="onUserFocus(nameRef)"
        @blur="onUserBlur(nameRef, userName)"
      />
    </div>
  </div>
</template>

<script  lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    let nameRef = ref(null);
    let userName = ref("");

    return {
      userName,
      nameRef,
      onUserFocus,
      onUserBlur,
    };
  },
});

//获取焦点事件
const onUserFocus = (dom) => {
  dom.classList.remove("blur_name");
  dom.classList.add("focus_name");
};

//失去焦点事件
const onUserBlur = (dom, value) => {
  if (!value) {
    dom.classList.add("blur_name");
  }
};
</script>

<style scoped lang="scss">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: