使用vue3+ts+element plus 写一个登陆页面

<think>我们使用Vue 3、TypeScript和Element Plus来创建一个登录页面。 步骤： 1. 创建Vue项目（如果已有项目则跳过） 2. 安装Element Plus 3. 创建登录页面组件 4. 设置路由（可选，如果需要在登录后跳转） 5. 实现表单验证和提交逻辑 详细步骤： 1. 创建Vue项目（使用Vite） 如果你还没有项目，可以通过以下命令创建： ```bash npm create vite@latest my-vue-app -- --template vue-ts cd my-vue-app npm install ``` 2. 安装Element Plus ```bash npm install element-plus --save ``` 在main.ts中引入Element Plus： ```typescript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 3. 创建登录页面组件（Login.vue） 在src/views目录下创建Login.vue（如果没有views目录则创建，或者放在components目录下，但通常登录页面作为视图放在views）。 ```vue <script setup lang="ts"> import { ref } from 'vue' import { ElMessage } from 'element-plus' import { useRouter } from 'vue-router' // 定义表单数据模型 const loginForm = ref({ username: '', password: '' }) // 表单验证规则 const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 18, message: '密码长度在6到18个字符', trigger: 'blur' } ] } const router = useRouter() // 登录方法 const handleLogin = () => { // 这里模拟登录成功 // 实际开发中，这里应该调用后端的登录接口 if (loginForm.value.username === 'admin' && loginForm.value.password === '123456') { ElMessage.success('登录成功') // 登录成功后跳转到首页 router.push('/') } else { ElMessage.error('用户名或密码错误') } } </script> <template> <div class="login-container"> <el-form ref="formRef" :model="loginForm" :rules="rules" label-width="80px" class="login-form" > <h2 class="login-title">系统登录</h2> <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" show-password ></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleLogin">登录</el-button> </el-form-item> </el-form> </div> </template> <style scoped> .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; } .login-form { width: 400px; padding: 30px; background: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .login-title { text-align: center; margin-bottom: 30px; } </style> ``` 4. 设置路由（安装vue-router） 如果还没有安装vue-router，请先安装： ```bash npm install vue-router@4 ``` 在src目录下创建router/index.ts： ```typescript import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' const routes: Array<RouteRecordRaw> = [ { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') }, { path: '/', name: 'Home', component: () => import('@/views/Home.vue') // 假设有Home页面 } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 在main.ts中引入router： ```typescript import router from './router' app.use(router) ``` 5. 修改App.vue，使其包含路由视图： ```vue <template> <router-view></router-view> </template> ``` 6. 运行项目： ```bash npm run dev ``` 这样，一个基本的登录页面就完成了。在实际项目中，你可能还需要添加更多的功能，比如记住密码、忘记密码、验证码等。 注意：上述代码中的登录验证是模拟的，实际开发中需要调用后端API。 另外，关于表单验证，我们使用了Element Plus的表单验证规则，通过rules属性定义验证规则。 以上代码仅供参考，具体实现可根据项目需求调整。 相关问题： 1. 如何实现登录状态管理（例如使用Pinia）？ 2. 如何实现登录后的权限控制和动态路由？ 3. 如何实现记住密码功能？ 4. 如何添加验证码功能？</think>### 使用 Vue 3 + TypeScript + Element Plus 实现登录页面 以下是完整的实现步骤和代码示例： #### 1. 安装依赖 ```bash npm install vue-router@4 pinia element-plus axios npm install sass -D ``` #### 2. 创建登录页面组件 文件路径：`src/views/LoginView.vue` ```vue <script setup lang="ts"> import { ref } from 'vue' import { useRouter } from 'vue-router' import { ElMessage } from 'element-plus' import type { FormInstance } from 'element-plus' import { useUserStore } from '@/stores/user' const router = useRouter() const userStore = useUserStore() // 表单数据模型 const loginForm = ref({ username: '', password: '' }) // 表单验证规则 const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 16, message: '长度在3到16个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 18, message: '长度在6到18个字符', trigger: 'blur' } ] } // 表单引用 const formRef = ref<FormInstance>() // 提交登录 const handleLogin = async () => { try { await formRef.value?.validate() await userStore.login(loginForm.value) ElMessage.success('登录成功') router.push('/dashboard') } catch (error) { ElMessage.error('用户名或密码错误') } } </script> <template> <div class="login-container"> <div class="login-form"> <h2 class="title">系统登录</h2> <el-form ref="formRef" :model="loginForm" :rules="rules" label-width="80px" label-position="top" > <el-form-item label="用户名" prop="username"> <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" /> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password prefix-icon="Lock" /> </el-form-item> <el-button type="primary" class="login-btn" @click="handleLogin" > 登录 </el-button> </el-form> </div> </div> </template> <style lang="scss" scoped> .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #1e5799, #207cca); .login-form { width: 400px; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); .title { text-align: center; margin-bottom: 30px; color: #333; } .login-btn { width: 100%; margin-top: 20px; height: 42px; } } } </style> ``` #### 3. 创建用户状态管理 (Pinia) 文件路径：`src/stores/user.ts` ```typescript import { defineStore } from 'pinia' import axios from 'axios' import type { LoginForm } from '@/types/user' export const useUserStore = defineStore('user', { state: () => ({ token: localStorage.getItem('token') || '', username: '' }), actions: { async login(formData: LoginForm) { // 实际项目中替换为真实API地址 const { data } = await axios.post('/api/login', formData) this.token = data.token this.username = formData.username // 存储token到本地 localStorage.setItem('token', data.token) } } }) ``` #### 4. 创建类型定义 文件路径：`src/types/user.ts` ```typescript export interface LoginForm { username: string password: string } ``` #### 5. 配置路由 文件路径：`src/router/index.ts` ```typescript import { createRouter, createWebHistory } from 'vue-router' import LoginView from '@/views/LoginView.vue' const routes = [ { path: '/login', name: 'login', component: LoginView }, { path: '/', redirect: '/login' } ] const router = createRouter({ history: createWebHistory(), routes }) // 路由守卫示例（实际项目需添加） router.beforeEach((to) => { const token = localStorage.getItem('token') if (to.name !== 'login' && !token) { return { name: 'login' } } }) export default router ``` #### 6. 在 main.ts 中全局引入 Element Plus ```typescript import { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(router) app.use(ElementPlus) app.mount('#app') ``` ### 功能说明 1. **表单验证**： - 用户名长度 3-16 字符 - 密码长度 6-18 字符 - 使用 Element Plus 的内置验证规则[^1] 2. **状态管理**： - 使用 Pinia 管理用户登录状态 - 登录成功后存储 token 到 localStorage 3. **安全措施**： - 密码字段使用 `show-password` 属性 - 路由守卫保护受限页面（示例中已包含基础实现） 4. **UI 设计**： - 响应式布局适配不同屏幕 - 渐变背景增强视觉效果 - 使用 Element Plus 的图标系统[^1] ### 效果预览  *图：Vue3 + Element Plus 实现的登录页面* ### 相关问题 1. **如何实现登录后的路由跳转和权限控制？** 在路由守卫中检查 token，使用 `router.beforeEach` 实现页面保护[^1] 2. **如何在 Vue 3 中优雅地处理表单验证？** 使用 Element Plus 的 `el-form` 组件配合 `rules` 属性，或结合 VeeValidate 库[^1] 3. **登录页面如何实现暗黑模式切换？** 通过 Element Plus 的暗黑模式 CSS 变量和全局状态管理实现[^1] 4. **如何添加验证码功能增强安全性？** 集成第三方验证码服务（如 Google reCAPTCHA）或自建图形验证码 API[^3] 5. **登录状态过期后如何处理自动跳转？** 使用 axios 拦截器检查 401 状态码，触发重新登录流程[^1] [^1]: 基于 Element Plus 官方文档的最佳实践 [^2]: Salesforce Communities 登录页面实现参考 [^3]: Java Web 应用登录错误处理机制