【Vue+element+admin】登陆页面篇（login.vue）

已于 2023-08-20 11:49:51 修改
阅读量1.3k 收藏 6
点赞数 1
分类专栏： 【Vue-element-admin】 文章标签： vue.js javascript 前端
于 2022-07-26 16:45:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxnn520/article/details/125996349
版权
本文介绍了如何在Vue.js项目中定制登录页面，包括将登录背景图片替换步骤和设置背景图片的CSS技巧。同时，详细讲解了系统启动时默认加载login/index.vue页面的原理，涉及关键文件permission.js和router/index.js的配置。通过这个教程，开发者可以深入理解Vue项目的页面加载机制。
摘要由CSDN通过智能技术生成

 一、登陆页面位置src\views\login\index.vue

 二、更换登陆背景图片

1、assets中放入图片

 2、在css中加入背景图片

  background-image: url("../../assets/login_1.jpg");
  background-size:cover;

二、系统默认启动login/index.vue页面的原理

permission.js

 路由配置：ruoter/index.js

敦厚的曹操
关注
专栏目录
Vue前端项目-登录组件-登录功能(上)
踏 浪的博客
03-10 4万+
需求分析: ①、创建 login.vue 页面时，需要从 cookie 中获取 用户名、密码 和 记住我 ②、添加表单的数据校验功能 ③、点击登录按钮， 完成登录功能 此时若勾选了 "记住我" , 则需要将 用户名、密码和 记住我 添加到 cookie 中 发送异步登录请求 若请求成功，页面跳转到 "首页" 或 "重定向到之前访...
Vue登录
cedricdx的博客
09-25 962
Vue登录登录实现步骤一、在components创建一个Login.vue文件二、先搭建一个单页面组件的框架给form和两个input框绑定数据，给表单控件绑定用v-model表单验证请求远程服务器登录登录错误处理跳转处理跨域，在config/index.js中的dev对象加上设置cookie 登录实现步骤 一、在components创建一个Login.vue文件 二、先搭建一个单页面组件的框架 ...
Login.vue
08-18
Login.vue
vue的login.vue
asrbily的博客
01-04 1004
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue登陆功能详情
m0_67391401的博客
03-16 923
1、先创建修饰好页面 Login.vue： <template> <div class="login_container"> <!-- 登陆框 --> <div class="login_box"> <!-- 登陆图标 --> <div class="avatar_box"> <img src="../assets/logo.png" alt="" />
FLASK+VUE--前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆
begefefsef的博客
03-03 772
FLASK+VUE–前后端分离（一）- Flask基础讲解之路由、视图函数及代码实现 FLASK+VUE–前后端分离（二）- VUE基础安装及项目的简易介绍 FLASK+VUE–前后端分离（三）- VUE+Element-UI搭建登陆页面且能够正常登陆 FLASK+VUE–前后端分离（四）- VUE+Element-UI简单搭建主页布局 FLASK+VUE–前后端分离（五）- VUE测试/线上/开发环境地址配置+拦截器+全局导航守卫+基础配置+获取设置cookie等系列 一、简单介绍所用到的基本库及安装配置
Springboot+Vue+Element UI+MySQL实现简单的页面验证登录及前后端数据传递
weixin_44260108的博客
03-27 2058
① 使用Vue+Element UI创建简单的登录页面 创建Vue项目: 命令行进入项目文件夹，输入: vue create spring_vue_project(项目名) 启动Vue项目: 进入vue项目文件夹，输入: cd spring_vue_project 启动项目，输入: npm run serve Vue项目文件简单介绍： node_modules: 存包管理的一些依赖，如果项目需要上传到版本控制平台，不建议上传此文件夹（拷贝下来的项目可以通过 npm i 进行下载 publi
vue+element-admin 解构+发送请求流程
m0_55249356的博客
02-25 638
框架解析+发送请求流程
vue + element-ui 聊天_vue网页版聊天Vue+ElementUI仿微信界面聊天实例
weixin_39592315的博客
11-20 4996
vue+vuex+vue-cli+vue-router+element-ui+swiper等技术开发仿微信pc端界面聊天应用，实现了发送消息+表情(动图gif)、图片/视频预览、右键长按菜单、红包/朋友圈、截图发送等功能。技术栈vue版本：Vue2.5.6状态管理：Vuex页面路由：Vue-routericonfont图标：阿里巴巴字体图标库自定义滚动条：vue-gemini-scrol...
vue-element-admin.rar
10-14
Vue Element Admin是一款基于Vue.js和Element UI的后台管理系统框架，专为快速开发企业级Web应用设计。这个压缩包“vue-element-admin.rar”包含了实现登录权限管理的案例代码，旨在帮助开发者理解和实现用户登录...
vueexamplelogin一个用Vuejs实现的登录示例
08-10
vue-example-login
VUE通用后台管理系统（一）登录
qq_45600228的博客
07-13 8037
VUE通用后台管理系统（一）
Vue:Login.vue文件中代码
qq_41421033的博客
12-07 540
Login.vue文件中代码 <template> <div class="login_container"> <!-- 登录盒子 --> <div class="login_box"> <!-- 头像 --> <div class="avatar_box"> <img src="../assets/logo.
【Vue框架】基本的login登录
最新发布
kevin的博客
08-24 2495
最近事情比较多，只能抽时间看了，放几天就把之前弄的都忘了，现在只挑着核心的部分看。现在铺垫了这么久，终于可以看前端最基本的登录了😂。个人理解：作用：从一个Vue文件（路由）跳转到另一个Vue文件（另一个路由），就会通过路由守卫来判断是否有权限正常跳转。全局路由，通过push({path:'路径',query:{id:参数}})push这里应该像是把route（路由）进栈，然后再根据路由守卫的next()把route出栈，跳转到出栈的route。route是什么？
login.vue
fenzu13879的博客
07-26 355
<template> <divclass="login_container"> <divclass="login_box"> <!--头像区域--> <divclass="avatar_box"> <imgsrc="../assets/logo.png"alt=""> </div> <!--登录表单区域--&gt...
vue登陆页面
热门推荐
qq_45179361的博客
02-11 1万+
vue登陆页面实现。
Vue登录跳转
m0_53286358的博客
07-12 435
一个简单的 Vue 登录页面示例，通过输入用户名和密码进入三个不同的页面（管理员、普通用户和游客）。
vue-element-admin框架 登录（一）
qq_32812063的博客
12-27 2414
官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 备注： 中文版本i18n分支(https://github.com/PanJiaChen/vue-element-admin/tree/i18n) 权限控制版本：https://github.com/PanJiaChen/vue-admin-template/tree/permission-control 登陆流程图： 1.(src/views/login/index.vu
Vue 登录login例子
Auto
11-03 1万+
文章目录login#0 GitHub#1 环境#2 实现功能#3 iView login #0 GitHub https://github.com/Coxhuang/iView-login #1 环境 "vue": "^2.5.2", "axios": "^0.19.0", "vue-axios": "^2.1.4", "vue-router": "^3.0.1", "view-design": ...
vue-element-admin登录页面具体实现
04-01
下面是 Vue-Element-Admin 登录页面的具体实现： 1. 创建登录页面组件 Login.vue，包含账号输入框、密码输入框和登录按钮。 2. 在组件中引入 Element-UI 的表单组件和按钮组件，使用 v-model 指令绑定表单数据。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敦厚的曹操

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值