Vue Project Series (Part 3)

  • 2023/10/10
  • 2-minute read

Recent News

  1. CNCF Micro-survey: Training helps developers’ careers and salaries, but lack of time and cost are the biggest obstacles. –CNCF

  2. The next generation of Docker is here! Build times reduced from 1 hour to 1.5 minutes, a 39x increase in build speed! It can also be combined with LangChain, Ollama, etc., for AI application development. –Dockercon

  3. Pray for world peace!

Developing the Login Page

Previously, we did some necessary basic installations. After introducing Unocss, designing styles has become very convenient, as you can set element styles directly inline. Let’s first look at the effect as shown below:

Let’s see what technology stack is needed to complete this common front-end backend system:

  • vue3
  • elementplus
  • vite
  • ts
  • pinia
  • vue router
  • wangeditor
  • echarts
  • vueuse
  • unocss

Version preparation: nodejs 16+

The login page can refer to the styles on the official Tailwind website. The code is too long to post here, so you can go directly to the official website to see it:

https://tailwindui.com/components/application-ui/forms/sign-in-forms

Then, you can use it directly, or design and modify it yourself.

Here is a piece of code I use for your reference:

<template>
  <div class="flex h-screen bg-gray-100">
    <!-- Left column -->
    <div class="w-1/2 p-8">
      <h1 class="text-3xl font-semibold mb-4">Welcome</h1>
      <form @submit.prevent="login">
        <div class="mb-4">
          <label for="username" class="block text-gray-600">Username</label>
          <input type="text" id="username" v-model="username" class="w-full px-4 py-2 border rounded-md">
        </div>
        <div class="mb-4">
          <label for="password" class="block text-gray-600">Password</label>
          <input type="password" id="password" v-model="password" class="w-full px-4 py-2 border rounded-md">
        </div>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Login</button>
      </form>
    </div>

    <!-- Right column -->
    <div class="flex-grow p-8 bg-white rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4">Right Column Title</h2>
      <p>This is the content of the right column. You can add any content you want here, such as login instructions, links, etc.</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // Handle login logic
      console.log('Username:', this.username);
      console.log('Password:', this.password);
      // Add actual login logic here
    },
  },
});
</script>

<style>
/* Add WindiCSS styles here, no need to add scoped */
</style>
October