Vue 3项目实战：从零构建登录界面

Vue 3项目实战：从零构建登录界面

引用

CSDN

1.

https://blog.csdn.net/2401_83781937/article/details/140153811

本文详细介绍了如何将一个登录界面的HTML+CSS+JS项目转换为Vue 3项目，并通过构建组件和实现组件间通信，帮助读者掌握Vue 3的项目开发技巧。

一、概述

本文将带领大家完成一个Vue 3项目的实战演练，重点讲解如何将一个登录界面的HTML+CSS+JS项目转换为Vue项目。这个登录界面不仅美观，而且功能齐全，非常适合Vue初学者进行实践。

三、需求分析

通过运行源代码，我们可以将页面分为三个主要部分：

我们将这三个部分封装成组件，在src目录下新建login文件夹，用于存放该项目的相关文件。同时，需要对router/index.ts进行一些初始化配置：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  { path: '/', component: () => import('@/login/login.vue') },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

四、构建组件

4.1 背景组件（父组件）

在login/login.vue文件中，我们首先创建了基本的HTML结构和样式：

<template>
    <div class="body">
        <div class="main">
            adad
        </div>
    </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
  }

.body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    background-color: #ecf0f3;
    color: #a0a5a8;
  }

.main {
    position: relative;
    width: 1000px;
    min-width: 1000px;
    min-height: 600px;
    height: 600px;
    padding: 25px;
    background-color: #ecf0f3;
    box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
    border-radius: 20px;
    overflow: hidden;
  }
  @media (max-width: 1200px) {
    .main {
      transform: scale(0.7);
    }
  }
  @media (max-width: 1000px) {
    .main {
      transform: scale(0.6);
    }
  }
  @media (max-width: 800px) {
    .main {
      transform: scale(0.5);
    }
  }
  @media (max-width: 600px) {
    .main {
      transform: scale(0.4);
    }
  }
</style>

4.2 Switch组件

Switch组件实现了滑动切换效果：

其核心代码如下：

<template>
<div class="switch" id="switch-cnt">
        <div class="switch__circle"></div>
        <div class="switch__circle switch__circle--t"></div>
        <div class="switch__container" id="switch-c1">
          <h2 class="switch__title title">Welcome Back !</h2>
          <p class="switch__description description">To keep connected with us please login with your personal info</p>
          <button class="switch__button button switch-btn" @click="change">SIGN IN</button>
        </div>
        <div class="switch__container is-hidden" id="switch-c2">
          <h2 class="switch__title title">Hello Friend !</h2>
          <p class="switch__description description">Enter your personal details and start journey with us</p>
          <button class="switch__button button switch-btn" @click="change">SIGN UP</button>
        </div>
      </div>
</template>

<script setup lang="ts">
    const change = () => {
        const switchC1 = document.querySelector("#switch-c1") as any;
        const switchC2 = document.querySelector("#switch-c2") as any;
        const switchCircle = document.querySelectorAll(".switch__circle") as any;
        const switchCtn = document.querySelector("#switch-cnt") as any;  
        switchCtn.classList.add("is-gx");
        setTimeout(function(){
            switchCtn.classList.remove("is-gx");
        }, 1500)
        switchCtn.classList.toggle("is-txr");
        switchCircle[0].classList.toggle("is-txr");
        switchCircle[1].classList.toggle("is-txr");
        switchC1.classList.toggle("is-hidden");
        switchC2.classList.toggle("is-hidden");
    }
</script>

<style scoped>
@import './login.css';
</style>

4.3 Sign组件

Sign组件包括登录和注册两个表单：

其核心代码如下：

<!-- sign_up -->
<template>
    <div class="container a-container" id="a-container">
        <form class="form" id="a-form" method="" action="">
          <h2 class="form_title title">Create Account</h2>
          <div class="form__icons">
             <img class="form__icon" src=" ">
             <img class="form__icon" src=" ">
             <img class="form__icon" src=" ">
          </div>
          <span class="form__span">or use email for registration</span>
          <input class="form__input" type="text" placeholder="Name">
          <input class="form__input" type="text" placeholder="Email">
          <input class="form__input" type="password" placeholder="Password">
          <button class="form__button button submit">SIGN UP</button>
        </form>
    </div>
</template>

<style scoped>
@import './login.css';
</style>

<!-- sign_in -->
<template>
<div class="container b-container" id="b-container">
    <form class="form" id="b-form" method="" action="">
      <h2 class="form_title title">Sign in to Website</h2>
      <div class="form__icons">
        <img class="form__icon" src=" ">
        <img class="form__icon" src=" ">
        <img class="form__icon" src=" ">
      </div>
      <span class="form__span">or use your email account</span>
      <input class="form__input" type="text" placeholder="用户名" v-model="loginFrom.username">
      <input class="form__input" type="password" placeholder="密码" v-model.lazy="loginFrom.password">
      <a class="form__link">Forgot your password?</a>
      <button class="form__button button submit">SIGN IN</button>
    </form>
</div>
</template>

<style scoped>
@import './login.css';
</style>

五、Vue组件之间的通信

为了实现Switch组件的按钮事件能够控制Sign组件的显示和隐藏，我们需要借助Event Bus。以下是具体实现步骤：

1. 安装mitt库：npm i mitt
2. 在main.ts中声明Event Bus：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import mitt from 'mitt'

const app=createApp(App)
app.config.globalProperties.emitter = mitt()

app.use(router)
app.mount('#app')

3. 在src/hooks/useEmitter.js中封装Event Bus：

// src/hooks/useEmitter.js
import { getCurrentInstance } from 'vue'

export default function useEmitter() {
  const internalInstance = getCurrentInstance()
  const emitter = internalInstance.appContext.config.globalProperties.emitter

  return emitter
}

4. 在Switch组件中添加Event Bus的发送代码：

<script setup lang="ts">
    import { ref } from 'vue'
    import useEmitter from '@/hooks/useEmitter.js'

    const sidebarOpen = ref(true)
    const emitter = useEmitter()

    const change = () => {
        const switchC1 = document.querySelector("#switch-c1") as any;
        const switchC2 = document.querySelector("#switch-c2") as any;
        const switchCircle = document.querySelectorAll(".switch__circle") as any;
        const switchCtn = document.querySelector("#switch-cnt") as any;
        switchCtn.classList.add("is-gx");
        setTimeout(function(){
            switchCtn.classList.remove("is-gx");
        }, 1500)
        switchCtn.classList.toggle("is-txr");
        switchCircle[0].classList.toggle("is-txr");
        switchCircle[1].classList.toggle("is-txr");
        switchC1.classList.toggle("is-hidden");
        switchC2.classList.toggle("is-hidden");

        sidebarOpen.value = !sidebarOpen.value
        emitter.emit('change', sidebarOpen.value)
    }
</script>

5. 在Sign组件中添加Event Bus的接收代码：

<script setup lang="ts">
 import { ref, onMounted } from 'vue'
  import useEmitter from '@/hooks/useEmitter.js'

  const emitter = useEmitter()
  onMounted(() => {
    emitter.on('change', (isOpen : boolean) => {
      let aContainer = document.querySelector("#a-container") as any;
      aContainer.classList.toggle("is-txl");
    })
  })
</script>

通过以上步骤，我们完成了Vue 3项目的实战演练，不仅掌握了组件的构建方法，还学会了如何实现组件间的通信。希望这篇文章能帮助你更好地理解Vue 3的开发技巧。