vue3.2 + elementPlus + Windi CSS + ts创建一个好用的可兼容不同宽高的login页面

**Vue3.2 + Element Plus + Windi CSS + TS 创建一个好用的可兼容不同宽高的 Login 页面**

### 前言在现代 web 应用中，Login 页面是必不可少的一部分。然而，传统的 Login 页面设计往往忽视了不同设备和浏览器的兼容性问题。这篇文章将指导你如何使用 Vue3.2、Element Plus 和 Windi CSS 等技术栈创建一个好用的可兼容不同宽高的 Login 页面。

### 技术栈* **Vue3.2**: 最新版本的 Vue.js 框架，提供了更好的性能和功能。
* **Element Plus**: 一款基于 Element UI 的组件库，提供了更多的组件和主题样式。
* **Windi CSS**: 一款轻量级的 CSS 预处理器，提供了快速的 CSS 编写体验。

###项目结构

bashlogin-page/
public/
index.htmlsrc/
main.tsApp.vueLogin.vuecomponents/
LoginHeader.vueLoginFooter.vueutils/
auth.jswindicss.config.jstsconfig.jsonpackage.json

vue<template>
 <div class="login-container">
 <!-- Login Header -->
 <LoginHeader />

 <!-- Login Form -->
 <form @submit.prevent="handleLogin">
 <el-input v-model="username" placeholder="Username" />
 <el-input v-model="password" placeholder="Password" type="password" />
 <el-button type="primary" native-type="submit">Login</el-button>
 </form>

 <!-- Login Footer -->
 <LoginFooter />
 </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElInput, ElButton } from 'element-plus';
import LoginHeader from './components/LoginHeader.vue';
import LoginFooter from './components/LoginFooter.vue';

export default defineComponent({
 components: {
 LoginHeader,
 LoginFooter,
 ElInput,
 ElButton },
 setup() {
 const username = ref('');
 const password = ref('');

 const handleLogin = async () => {
 // Handle login logic here };

 return {
 username,
 password,
 handleLogin };
 }
});
</script>

<style scoped>
.login-container {
 @apply flex flex-col justify-center items-center h-screen;
}

form {
 @apply w-full max-w-md p-4 bg-white rounded shadow-sm;
}
</style>

vue<template>
 <div class="login-header">
 <!-- Logo -->
 <img src="@/assets/logo.png" alt="Logo" />

 <!-- Title -->
 <h1>Login Page</h1>
 </div>
</template>

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

export default defineComponent({
 setup() {
 return {};
 }
});
</script>

<style scoped>
.login-header {
 @apply flex justify-center items-center mb-4;
}

img {
 @apply w-16 h-16 rounded-full;
}
</style>

vue<template>
 <div class="login-footer">
 <!-- Copyright -->
 <p>&copy; {{ new Date().getFullYear() }} Login Page</p>

 <!-- Links -->
 <ul>
 <li><a href="#">Terms of Service</a></li>
 <li><a href="#">Privacy Policy</a></li>
 </ul>
 </div>
</template>

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

export default defineComponent({
 setup() {
 return {};
 }
});
</script>

<style scoped>
.login-footer {
 @apply flex justify-center items-center mt-4;
}

p {
 @apply text-sm text-gray-500;
}

ul {
 @apply list-none ml-2;
}

li {
 @apply inline-block mr-2;
}

a {
 @apply text-blue-600 hover:text-blue-700;
}
</style>

javascriptmodule.exports = {
 theme: {
 extend: {}
 },
 variants: {},
 plugins: []
};

json{
 "compilerOptions": {
 "target": "esnext",
 "useDefineForClassFields": true,
 "module": "commonjs",
 "lib": ["es2020"],
 "outDir": "./dist",
 "rootDir": "./src"
 }
}

json{
 "name": "login-page",
 "version": "1.0.0",
 "scripts": {
 "build": "vue-cli-service build",
 "serve": "vue-cli-service serve"
 },
 "dependencies": {
 "@element-plus/icons": "^2.0.10",
 "element-plus": "^2.0.10",
 "vue": "^3.2.19",
 "windicss": "^4.1.5"
 }
}