（十一）Vue3-huohuo-admin 登录页基础开发

HuoHuo
588 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路

本篇继续讲我们的登录页

登录模块

首先我们思考如下几点：

  • 登录模块的核心——表单
  • 登录的基本业务——验证、登录、注册、找回
  • 登录的渠道/方式——账号密码登录、手机登录、二维码登录、第三方登录

PS：一般来说主要就是这些，如果你有多个系统或者网址，你可以选择设计一个统一的中转登录页面，在一个系统中登录后，所有的相关联系统都免登陆，这种需求现在也挺常见了，当然这部分背后的工作主要是在后端哈哈哈。

这里我们先给出一个最基础的设计：

<template>
  <img :src="bg" class="wave" />
  <div class="login-container">
    <div class="img">
      <component :is="currentWeek" />
    </div>
    <div class="login-box">
      <div class="login-form">
        <avatar class="avatar" />
        <h2>HUOHUO Admin</h2>
        <el-form>
          <el-form-item><el-input clearable placeholder="账号" /></el-form-item>
          <el-form-item><el-input clearable placeholder="密码" /></el-form-item>
          <el-form-item
            ><el-input clearable placeholder="验证码"
          /></el-form-item>
          <el-form-item>
            <div class="w-full h-20px flex justify-between items-center">
              <el-checkbox>记住密码</el-checkbox>
              <el-button text type="primary"> 忘记密码? </el-button>
            </div>
            <el-button class="w-full mt-4" size="default" type="primary">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

示例：

image-20220519165222872

除了继续填充上面提到的登录业务流，我们还可以做哪些工作，来优化我们的表单使用体验呢？

  • 使用图标
  • 动画效果

图标组件

在 element-plus 的组件当中，我们确实可以非常方便地使用组件库自带的图标，但你有很大概率会遇到这么一个窘境——elment-plus 自带的图标库中没有你想要的图标。

这时候怎么办呢？叫 UI 帮你做一个？引入阿里 iconfont？再引入 Remix...要是你想要的图标在别的 UI 组件库里呢？要是你想要某些官方的 Logo 呢？

还有问题是，你上哪找到你想要的图标呢？

要是有一个库，能涵盖大部分市面上常见的图标就好了。没错，iconify统一图标框架就能满足你。

图标我们都能很快找到想要的了，那么我怎么方便地统一使用他们呢——封装图标组件。

图标引入

为了支持这个组件，需要使用到 Iconify 中对 Vue 支持的原生组件，我们先安装对应的插件：

pnpm install -D @iconify/vue

你需要一个图标时，在这里输入这个图标可能的名字，就能查到 iconify 库中所有相关的图标。

image-20220520144822341

你也可以选择某个图标库之后，在这个图标库中进行搜索：

比如我们选择 element-plus 的图标库，需要先安装这个库的图标（安装后都按需引入）：

pnpm install -D @iconify-icons/ep

image-20220520144952286

搜索到了对应图标后，你还可以自由调整，并根据约定的规范使用它

image-20220520145217298

组件相关

我们在项目中统一使用封装好的图标组件（ReIcon）来使用图标（该组件的开发占篇幅较多，后续会出专门篇章讲解，这里我们直接使用）。

组件中使用到了 lodash-unified 插件，帮助我们处理代码逻辑，这里需要注意的是 lodash-unified 和 lodash-es 需要同时安装。lodash-unified 只是对 lodash-es 做了 ESM(ESModule)格式支持并兼容 CJS(CommonJS)格式，使用它可以使 vite 更快速启动。

pnpm install lodash lodash-es lodash-unified

这时候控制台可能会报错，需要补充类型支持：

image-20220520151021033

pnpm install -D @types/lodash-es

如果编辑器还报类似找不到类型的错误，记得重启编辑器哦

这个组件里面有多个图标使用方法，接下来我们会慢慢使用上：

  • useRenderIcon
  • IconifyIconOffline
  • IconifyIconOnline
  • IconSelect
  • FontIcon

使用该组件之前，请先把这些可能用到的图标插件安装上去

image-20220520150358846

动画效果

登录表单使用到了一些小动画，来提升用户体验，技术实现是基于vueuse/motion。

// ...
<div class="login-box">
  <div class="login-form">
    <avatar class="avatar" />
    <Motion> <h2>Huohuo Admin</h2></Motion>
    <el-form>
      <Motion :delay="100">
        <el-form-item><el-input clearable placeholder="账号" /></el-form-item
      ></Motion>
      <Motion :delay="150"
        ><el-form-item><el-input clearable placeholder="密码" /></el-form-item
      ></Motion>
      <Motion :delay="200">
        <el-form-item><el-input clearable placeholder="验证码" /></el-form-item>
      </Motion>
      <Motion :delay="250">
        <el-form-item>
          <div class="w-full h-20px flex justify-between items-center">
            <el-checkbox>记住密码</el-checkbox>
            <el-button text type="primary"> 忘记密码? </el-button>
          </div>
          <el-button class="w-full mt-4" size="default" type="primary">
            登录
          </el-button>
        </el-form-item>
      </Motion>
    </el-form>
  </div>
</div>

这就是基本的登录啦，当然实际中会有很多的 JS 逻辑处理，这部分偏向业务流，我们可以参照项目源码去看一看啦！

avatar
文章
阅读
粉丝