Vue项目系列（三）

  • 2023/10/10
  • 阅读时间 1 分钟

近日见闻

  1. CNCF微观调查：培训有助于开发人员职业生涯和薪酬，但缺乏时间和成本成为最大阻力。 –CNCF

  2. 下一代 Docker 来了！1小时构建缩至1.5分钟，构建速度提高了39倍！还能结合 LangChain、Ollama 等做 AI 应用开发。–Dockercon

  3. 祈祷世界和平！

开发登录页面

前面我们做了一些必要的基础安装，在引入Unocss之后，样式设计真的很方便，直接可以在行内设置元素样式。先看看效果如下图：

我们再看看完成这个前端通用的后台系统需要哪些技术栈：

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

版本准备： nodejs 16+

登录页面可以参考tailwind官网的样式,代码太长就不贴在这了，可以直接去官网看：

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

然后，直接用就可以，或者自己设计修改即可。

这里分享一段我用的代码，供大家参考，

<template>
  <div class="flex h-screen bg-gray-100">
    <!-- 左侧列 -->
    <div class="w-1/2 p-8">
      <h1 class="text-3xl font-semibold mb-4">欢迎登录</h1>
      <form @submit.prevent="login">
        <div class="mb-4">
          <label for="username" class="block text-gray-600">用户名</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">密码</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">登录</button>
      </form>
    </div>

    <!-- 右侧列 -->
    <div class="flex-grow p-8 bg-white rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4">右侧列标题</h2>
      <p>这是右侧列的内容。您可以在这里添加任何您想要的内容，例如登录说明、链接等。</p>
    </div>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    login() {
      // 处理登录逻辑
      console.log('用户名:', this.username);
      console.log('密码:', this.password);
      // 在此添加实际的登录逻辑
    },
  },
});
</script>

<style>
/* 在这里添加 WindiCSS 的样式，不需要添加 scoped */
</style>
10月