近日见闻
- CNCF微观调查：培训有助于开发人员职业生涯和薪酬，但缺乏时间和成本成为最大阻力。 --CNCF
- 下一代 Docker 来了！1小时构建缩至1.5分钟，构建速度提高了39倍！还能结合 LangChain、Ollama 等做 AI 应用开发。--Dockercon
- 祈祷世界和平！
开发登录页面
前面我们做了一些必要的基础安装，在引入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
然后，直接用就可以，或者自己设计修改即可。
这里分享一段我用的代码，供大家参考，
代码语言：javascript复制<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>
