快速上手vue的登录界面(最新版)

news2025/7/19 0:36:33

文章目录

  • 一、创建vue项目
  • 二、引入依赖
  • 三、改造下项目
  • 四、写入Login视图
  • 总结


这是一个非常非常适合新手的vue登录界面,总体来说美观大气,axios那部分没有发,有需要的大家可以自己进行二次开发,继续编写。
用到了技术栈有
vue/cli 5.07 + element-ui 2.15.9
适合入门级新手,展示下页面
在这里插入图片描述
emmm验证码,什么的可以等有兴趣的人二次开发
在这里插入图片描述
好下面来讲述具体如何来实现这个页面。


一、创建vue项目

使用vue的脚手架创建项目,然后把不需要的内容删去,可以看到页面如下:
在这里插入图片描述

需要注意的是你创建时候需要去勾选router选项,如果不勾选的话未来会很麻烦,需要自己重新配置下载,如何创建vue项目,可以翻找我的博文,我的博文里面有记载。

二、引入依赖

把需要的依赖引入,这里我不打算讲太深,就是很简单的把element-ui依赖下载
具体怎么下载打开terminal,输入指令npm install element-ui -S就可以下载,下载完可以在package.json可以看到
在这里插入图片描述
我这里有个axios不用在意,因为我实现了前后端互联,所以对于基础功能而言这些是不需要注意的

三、改造下项目

app.vue改造成如下样式
在这里插入图片描述
router下的index.js需要改变下,因为新的页面为Login.vue
在这里插入图片描述
在assets下加入名为background的图片,图片已取出放在下面了
在这里插入图片描述

对了差点忘了要改一下main.js
在这里插入图片描述
代码如下:

import Vue from "vue";
import router from "./router";
import ElementUI from 'element-ui';
import App from './App.vue';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

还有就是驼峰法则查的很严,
要在vue.config.js上
控制下摆脱这东西,
在这里插入图片描述
代码如下:
`const { defineConfig } = require(“@vue/cli-service”);
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
});


四、写入Login视图

在这里插入图片描述
在views下创建Login.vue
代码如下:

<template>
    <div>
  <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
     <h3 class="loginTitle">
       系统登录
     </h3>
      <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.username" placeholder="亲,请输入用户名" >
          </el-input>
      </el-form-item>
      <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="亲,请输入密码" >
          </el-input>
      </el-form-item>
      <el-form-item prop="code">
          <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" style="width: 250px;margin-right: 5px">
          </el-input>
          <img :src="captchaUrl">

      </el-form-item>
      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
      <el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button>
  </el-form>
    </div>
</template>

<script>
export default {
  name: "Login",
    data(){
      return{
          captchaUrl: "",
          loginForm:{
              username:"admin",
              password:"ssssss",
              code:''
          },
          checked: true,
          rules:{
              username:[{required:true,message:"请输入用户名",trigger:"blur"},{ min: 5, max: 14, message: '长度在 514 个字符', trigger: 'blur' }
              ],
              password:[{required:true,message:"请输入密码",trigger:"blur"},,{ min: 6,  message: '密码长度要大于6', trigger: 'blur' }],
              code:[{required:true,message:"请输入验证码",trigger:"blur"}],
          }

      }
  },
    methods:{
      submitLogin(){
          this.$refs.loginForm.validate((valid) => {
              if (valid) {
                  alert('提交成功');
              } else {
                  this.$message.error('登录出错请重新输入');
                  return false;
              }
          });
      }
    }
};
</script>

<style lang="less" scoped>
    .loginContainer{
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: aliceblue;
        border:1px solid blueviolet;
        box-shadow: 0 0 25px #f885ff;
    }
    .loginTitle{
        margin: 0px auto 48px auto;
        text-align: center;
        font-size: 40px;
    }
    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
    body{
        background-image: url("../assets/background.jpg") ;
        background-size:100%;
    }
</style>

然后细细讲解下代码
style中主要控制登录框的位置,以及如何去设计,body那里样式是设计的全局背景图,rules:设置了检验规则避免无效登录,设置成一失去焦点就会继续检查,checked保证了登录功能后续开发,巴拉巴拉一大堆但是很容易懂。

总结

然后希望这篇文章能够帮助到你,快速掌握vue。也感谢有大佬提出意见,页面样式一定要设置scoped,否则会影响后续的所有页面样式,二次开发要注意希望大家引以为戒。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405007.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue3 | 数据可视化实现数字滚动特效

前言 vue3不支持vue-count-to插件&#xff0c;无法使用vue-count-to实现数字动效&#xff0c;数字自动分割&#xff0c;vue-count-to主要针对vue2使用&#xff0c;vue3按照会报错&#xff1a; TypeError: Cannot read properties of undefined (reading _c) 的错误信息。这个时…

idea如何导入jar包

通过添加Libraries的方式引入&#xff1a; 1、首先在根目录下创建一个 libs 的目录 2、打开 File -> Project Structure 3、单击 Libraries -> "" -> "Java" -> 选择我们导入的项目主目录&#xff0c;点击OK 4、注意&#xff1a;在弹出的方框…

Vite 完整版详解

目录 序论&#xff1a; vite架子分析 1、 打包构建&#xff1a; 2、环境变量 3、模式 4、兼容老浏览器 5、typescript相关 6、基本配置 核心配置全集 推荐两个插件插件Volar 、 Vue 3 Snippets 序论&#xff1a; 开发环境&#xff1a;ESMHMR:来实现模块的热更新;类…

前端项目性能优化方案有哪些

目录 一、 加载优化&#xff08;减少http请求数&#xff09; 二、图片优化 三、使用CDN 四、开启Gzip&#xff08;代码压缩&#xff09; 六、减少不必要的Cookie 七、脚本优化 八、前端代码结构的优化 九、SEO优化 一、 加载优化&#xff08;减少http请求数&#xff09…

vue中axios的二次封装——vue 封装axios详细步骤

一、为什么要封装axios api统一管理&#xff0c;不管接口有多少&#xff0c;所有的接口都可以非常清晰&#xff0c;容易维护。 通常我们的项目会越做越大&#xff0c;页面也会越来越多&#xff0c;如果页面非常的少&#xff0c;直接用axios也没有什么大的影响&#xff0c;那页面…

vue3的setup的使用和原理解析

1.前言 最近在做vue3相关的项目&#xff0c;用到了组合式api&#xff0c;对于vue3的语法的改进也是大为赞赏&#xff0c;用起来十分方便。对于已经熟悉vue2写法的同学也说&#xff0c;上手还是需要一定的学习成本&#xff0c;有可能目前停留在会写会用的阶段&#xff0c;但是s…

Swagger-的使用(详细教程)

文章目录前言一、简介二、基本使用1. 导入相关依赖2. 编写配置文件2.1 配置基本信息2.2 配置接口信息2.3 配置分组信息3. 控制 Swagger 的开启4. 常用注解使用ApiModelApiModelPropertyApiOperationApiParam5. 接口调用三、进阶使用1. 添加请求头四、项目下载前言 作为后端开放…

37.JavaScript对象与JSON格式的转换,JSON.stringify、JSON.parse方法的使用方法和注意事项

文章目录JSON处理JSON.stringifystringify的限制排除和替换映射函数格式化使用的空格数量自定义toJSON方法JSON.parse使用reviver总结JSON处理 JSON&#xff08;JavaScript Object Notation&#xff09;是JavaScript表达值和对象的通用数据格式&#xff0c;其本质就是符合一定…

2023前端面试题及答案整理(JavaScript)

JS类型 string&#xff0c;number&#xff0c;boolean&#xff0c;undefined&#xff0c;null&#xff0c;symbol&#xff08;es6&#xff09;&#xff0c;BigInt&#xff08;es10&#xff09;&#xff0c;object 值类型和引用类型的区别 两种类型的区别是&#xff1a;存储位…

Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间)

1. 类型总结 指定格式 YYYY-MM-DD HH:MM:SS时间戳中国标准时间 Sat Jan 30 2022 08:26:26 GMT0800 (中国标准时间) new Date()获得系统当前时间就会是这种形式 2. 类型之间的转换 时间戳转换为 yyyy-mm-dd或yyyy-MM-dd HH-mm-ss function timestampToTime(timestamp) {var …

【vue】 配置代理

文章目录参考文档跨域问题引入配置代理解决跨域问题&#xff1a;方法一&#xff1a;方法二&#xff1a;使用方法二最终的文件&#xff1a;总结参考文档 尚硅谷视频&#xff1a;https://www.bilibili.com/video/BV1Zy4y1K7SH?p95 axios官网教程&#xff1a;https://axios-htt…

uniapp分包,小程序分包处理,详解(图解),手把手从0开始

一、为什么要分包 因小程序有体积和资源加载限制&#xff0c;优化小程序的下载和启动速度。 二、主包和分包 所谓的主包&#xff0c;即放置默认启动页面/TabBar 页面&#xff0c;以及一些所有分包都需用到公共资源/JS 脚本&#xff1b;而分包则是根据pages.json的配置进行划…

微信小程序详细教程(建议收藏)

一.小程序的开发准备 1. 小程序的安装与创建 第一步 打开小程序官网第二步 找到开发管理&#xff0c;找到开发设置&#xff0c;下面有一个AppID&#xff0c;复制即可&#xff0c;后面开发小程序需要用 新建项目 &#xff0c;需要先下载微信开发工具下载网址&#xff0c;安装完…

九个前端神奇库,让你的前端项目瞬间美化,甲方看了都落泪

九个前端神奇库&#xff0c;让你的前端项目瞬间美化&#xff0c;甲方看了都落泪 九个前端神奇库 文章目录九个前端神奇库&#xff0c;让你的前端项目瞬间美化&#xff0c;甲方看了都落泪1. Lottie-web/Bodymovin2. Parallax.js3. Magic Grid4. webslides5. SVG.js6. rellax7. …

【Vue面试专题】50+道经典Vue面试题详解!

目录前言相关学习资源01-Vue组件之间通信方式有哪些02-v-if和v-for哪个优先级更高&#xff1f;03-能说一说双向绑定使用和原理吗&#xff1f;04-Vue中如何扩展一个组件05-子组件可以直接改变父组件的数据么&#xff0c;说明原因06-Vue要做权限管理该怎么做&#xff1f;控制到按…

hexo主题应用

可以在hexo主题官网自己选择,官网网址:主题,选择哪个全凭自己的喜好。 我选择的一个主题是stun,官网效果图 安装主题stun git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun安装依赖 git clone -b dist https://github.com/liuyib/hexo-theme-stun…

前端常见面试八股文

HTML篇 1、H5新增标签有哪些&#xff1f; 一、语义化标签 header、footer、nav、aside、section、article 语义化的意义&#xff1f; 1、更适合搜索引擎的爬虫爬取有效的信息&#xff0c;利于SEO。 2、对开发团队很友好&#xff0c;增加了标签的可读性&#xff0c;结构更…

VScode 看这一篇就够了

VScode 小白入门教程 VScode 小白入门教程 VScode简介VScode的下载与安装VScode的常用设置 基础设置禁用自动更新自动保存设置Vscode更换主题 VScode的常用快捷键开发人员常用的VScode插件使用VScode开始你的第一行C/C代码 VScode简介 VScode全称是Visual Studio Code&…

一文吃透JavaScript程序控制流与函数

文章目录思维导图&#x1f496;程序控制流⛳️顺序结构⛳️分支结构&#x1f4ab;比较运算符&#x1f4ab;逻辑运算符&#x1f4ab;if语句&#x1f4ab;switch语句⛳️循环结构&#x1f4ab;while语句&#x1f4ab;do...while语句&#x1f4ab;for语句&#x1f4ab;break和cont…

【小程序开发】uniapp引入iconfont图标及使用方式

&#x1f9ca; 前言 本文主要讲述的是在使用uniapp中如何引入iconfont图标&#xff0c;以及两种常用的位置。 位置一&#xff1a;App下原生导航栏的按钮使用字体图标。位置二&#xff1a;页面中的任意位置使用iconfont图标。 &#x1f33a; 正文 第一步&#xff1a;打开iconfo…