Vue + ElementUI 登录页面

已于 2024-02-18 16:38:57 修改
阅读量581 收藏 1
点赞数 1
文章标签： vue.js elementui 前端
于 2023-08-19 23:25:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41206014/article/details/132368801
版权

一. Vue项目搭建

1. cmd命令cd

用管理员身份运行 cmd， 目录切换到项目要创建的文件夹

2. 初始化工程

使用webpack打包工具初始化一个名为 vue-elementui 的工程

vue init webpack vue-elementui

这里稍微会有一点慢，我大概等了3分钟左右，然后根据以下截图选择即可：

e5f213771c0745b89995e8e3e5c352e9.png

 等待3分钟左右，出现以下界面则安装完成。

f50d51ad399f4039ac8d8cb659046e72.png

 3. 安装vue-router

npm install vue-router --save-dev

 安装过程中，若无报错则继续

 我有以下报错，npm ERR! peer vue@"^3.2.0" from vue-router@4.2.4

2e4cdeb7528e4da5ad4c0414170e1e25.png

 这是因为2022年2月7日以后，vue-router的默认版本，为4版本，而且 vue-router4,只能在vue3中，我目前vue是版本2 ，因此vue2中需要改成vue-router3

命令指定vue-router的版本为3，即可安装成功

npm install vue-router@3 --save-dev

9eb58d267494441baf467597ce2d0ed2.png

4. 安装ElementUI

npm i element-ui -S

6dd6cddcb5554c67a95f4860015dde38.png 5. 安装SASS加载器

npm install sass-loader@7.3.1 node-sass --save-dev

说明:  sass-loader默认不指定版本是最新的8.0.x，运行可能出现问题，所以指定版本安装

4bd4d4c2e46e4575b291f69242f23c3e.png

6. 安装项目所有依赖 

npm install

 7. 项目启动测试

 npm run dev

f672f6b35e4a42f7880caa6e6b6ca811.png

 浏览器访问成功：

05fc5327aa7a4becab67a698c645bd49.png

二. 项目实战 

1. 设置路由成功

1-1  项目开始从App.vue入手，删掉原来的页面展示代码和style样式，并添加路由标签<router-view />， HelloWorld.vue删掉，如下：

<template>
  <div id="app">
    <!-- 项目自带的，注释掉 -->
    <!-- <img src="./assets/logo.png">
    <HelloWorld/> -->
    <router-view />
  </div>
</template>

<script>
  // import HelloWorld from './components/HelloWorld'

  export default {
    name: 'App',
    // components: {
    //   HelloWorld
    // }
  }
</script>

<!-- <style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style> -->

1-2  新建一个登录页面，路径为/src/views/Login.vue，将这个页面暴露出去

<template>
    <div>
      我是登录页
    </div>
</template>

<script>
    export default {
      name: 'login'
    }
</script>
<style lang="">

</style>

1-3  主页面和登录页面要建立关联，因此创建/src/router/index.js文件，来实现路由功能

引入'vue-router'并使用，将登录页面Login.vue跟访问路径对应起来

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'

Vue.use(Router);

export default new Router({
  routes: [{
    //登录页
    path: '/login',
    name: 'login',
    component: Login
  }]
})

1-4  main.js文件需要引入'vue-router'和elementui相关依赖，看elementui官网： 

        https://element.eleme.cn/#/zh-CN/component/quickstarthttps://element.eleme.cn/#/zh-CN/component/quickstart

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VueRouter);
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

现在，一个简单的页面路由就可以测试成功啦

d61f06ac65984dbf9581906f15512a32.png

2. 登录页面绘制 

2-1  登录页面绘制

<template>
    <div>
      <el-form ref="form" :model="form" label-width="40px" class="login-box">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="账号">
          <el-input type="text" placeholder="请输入账号" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    export default {
      name: 'login',
      data() {
        return {
          form: {
            name: '',
            password: ''
          }
        }
      },
      methods: {
        onSubmit() {
          alert("登录中");
        }
      }
    }
</script>
<!--scoped是指只在本页面生效-->
<style lang="css" scoped>
  .login-box{
    width: 350px;
    margin: 120px auto;
    border: 1px solid #DCDFE6;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 30px #DCDFE6;
  }
  .login-title{
    text-align: center;
  }

</style>

2-2  登录成功，跳转主页面绘制   /src/views/Main.vue

<template>
  <div>
    首页
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

在index.js中增加路由配置，在Login.vue中增加跳转代码

2811f425261a401096a0ba241ff6ab4b.png

cb7d43be714d44d4a317c294b3b654e0.png

3. 登录验证

组件从ElementUI官网直接抄现成的  /src/views/Login.vue

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="name">
        <el-input type="text" placeholder="请输入账号" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      form: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push("/main");
        } else {
          this.$message({
            message: '请输入用户名和密码',
            type: 'warning'
          });
          return false;
        }
      });
    },
  }
}
</script>
<!--scoped是指只在本页面生效-->
<style lang="css" scoped>
.login-box {
  width: 350px;
  margin: 120px auto;
  border: 1px solid #DCDFE6;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 30px #DCDFE6;
}

.login-title {
  text-align: center;
}

</style>

 4. 嵌套路由与参数传递

4-1 路由嵌套

主要适用于一个主页面，有侧边栏、导航栏和中间动态的部分，点击侧边栏，中间内容随着变化的场景，中间变化的内容便是嵌套的路由

4-1-1  在中间嵌套路由那里用 <router-view />占用位置

8f0ed74e4cd947cb9db0ddd0b052c4e9.png

4-1-2  中间部分需要新建页面，如MemberLevel.vue

<template>
  <div>
    会员等级
  </div>
</template>

<script>
export default {
  name: "MemberLevel"
}
</script>

<style scoped>

</style>

 4-1-3  子路由需要配置在/src/router/index.js中

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Main from '../views/Main.vue'
import MemberLevel from "../views/member/MemberLevel";
import MemberList from "../views/member/MemberList";

Vue.use(Router);

export default new Router({
  routes: [{
    //登录页
    path: '/login',
    name: 'login',
    component: Login
  },
    {
      //首页
      path: '/main',
      name: 'main',
      component: Main,
      //子路由
      children: [
        {
          //会员等级
          path: '/member/level',
          name: 'MemberLevel',
          component: MemberLevel
        },
        {
          //会员等级
          path: '/member/list',
          name: 'MemberList',
          component: MemberList
        }
      ]
    },
  ]
})

4-1-4  路由跳转配置在页面点击处，跟超链接的概念一致  /src/views/Main.vue

<router-link to="/member/level">会员等级</router-link> 

<template>
  <div>
    <el-container>
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '2']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>会员管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/member/level">会员等级</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/member/list">会员列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-message"></i>商品管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">商品分类</el-menu-item>
              <el-menu-item index="2-2">商品列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>用户中心</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
        <el-main>
          <!--嵌套路由-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

4-2  参数传递

4-2-1  路径匹配的两种方式

{
  //会员等级
  path: '/member/level/:id',
  name: 'MemberLevel',
  component: MemberLevel
}

说明：主要是在path属性中增加了:id这样的占位符

取值方式：

<div>
  会员等级 ID= {{$route.params.id}}
</div>

<!--第一种方式-->
<router-link to="/member/level/1">会员等级</router-link>
<!--第二种方式-->
<router-link :to="{name: 'MemberLevel', params: {id:2}}">会员等级</router-link>

8aaec6f366444aa89c1f4f4a327715c2.png

 4-2-2  props的方式

{
  //会员等级
  path: '/member/level/:id',
  name: 'MemberLevel',
  component: MemberLevel,
  props: true
}

export default {
  props:['id'],
  name: "MemberLevel"
}

取值方式：

会员等级 ID= <!--{{$route.params.id}}--> {{id}}

5. 组件重定向

<el-menu-item index="1-3">
  <router-link to="/main/admin123">返回首页</router-link>
</el-menu-item>
{
  //重定向
  path: '/goMain/:name',
  redirect: '/main/:name'
}

6. 路由模式 + 处理404

6-1  之前访问路径http://localhost:8080/#/login  总带有‘#’，可以这种方式去掉

export default new Router({
  mode: 'history',

6-2  有些页面找不到资源的时候，需要报错404

新增报错页面 ，然后在页面加以下配置即可

{
  path: '*',
  component: Error
}

0c25331c85734a98a087c60639f8f7ca.png

 7. 路由钩子函数 + 异步请求

7-1  钩子函数

/*路由钩子*/
beforeRouteEnter: (to, from, next) => {
  console.log("进入会员等级页面");
  next();
},
beforeRouteLeave: (to, from, next) => {
  console.log("离开会员等级页面");
  next();
}

7-2  异步请求  

安装axios

npm install axios -s

在main.js文件中引入并使用axios

import axios from "axios";
Vue.prototype.axios = axios;

7-3  使用 

methods: {
  getData: function () {
    this.axios({
      method: 'get',
      url: 'http://localhost:8080/data.json',
    }).then(function (repos) {
      console.log(repos);
    }).catch(function (error) {
      console.log(error);
    })
  }
}
/*路由钩子*/
beforeRouteEnter: (to, from, next) => {
  console.log("进入会员等级页面");
  next(vm => {
    vm.getData();
  });
},

这里，我遇到一个跨域的问题，后续解决完再回来补充

ce0193559bbb427d942d5e07a4cbdd55.png

  8. Vuex判断用户是否登录

安装Vuex，引入并使用

npm install vuex@3 --save

 import Vuex from "vuex";

Vue.use(Vuex);

sessionStorage.setItem('isLogin', 'true');
// 路由跳转之前
router.beforeEach((to, from, next)=>{
  let isLogin = sessionStorage.getItem('isLogin');
  if (to.path == '/logout'){
    //清空
    sessionStorage.clear();
    //跳转到登录页面
    next({path:'/login'});
  }else if (to.path == '/login') {
    if (isLogin  != null) {
      next({path:'/main'});
    }
  }else if (isLogin == null) {
    next({path:'/login'});
  }
  next();
})

  9. Vuex操作对象

  10. Vuex模块化

项目gitee地址：https://gitee.com/EstellaQ/vue-elementui.git

Yvonne978
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+ElementUI搭建登陆页面
qq_64230952的博客
05-05 9736
1.使用vue-cli脚手架工具创建一个vue项目 2.安装elementUI插件依赖 注意 ：i 指的是 install 的缩写 npm install 下载全部依赖 npm install xxx -g 全局安装，下载到%NODE_HOME%\node_global npm install xxx -S 下载指定依赖,写入到package.json中的dependencies，当前项目 npm install xxx -D 下载指定依赖,写入到package.json中的...
快速上手vue elementUI好看的登录界面
IT13333的博客
03-22 1万+
然后希望这篇文章能够帮助到你，快速掌握vue。
快速上手vue的登录界面(最新版)
热门推荐
呼啦啦啦啦啦的博客
07-22 3万+
快速上手vue的登录界面(最新版)
2024年最全VUE登录注册页面,完整vue，直接复制_vue登录注册页面代码，卧槽
最新发布
2401_84619342的博客
05-07 541
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总Login.vue
vue登陆页面
qq_45179361的博客
02-11 7180
vue登陆页面实现。
vue实现简单登录界面
StringBuffer Obj 的博客
06-27 5464
记录一个简单登录界面实现
Vue实现自动化平台（二）--实现登录页面&首页
喵酱
04-01 7435
Vue实现自动化平台（二）
基于vue + elementUI的管理系统模板
02-22
基于vue + elementUI的管理系统模板
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key...
vue+elementUI实现简单日历功能
10-14
主要为大家详细介绍了vue+elementUI实现简单日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+elementUI管理系统页面源代码
02-12
vue2+elementUI后台管理系统，页面源代码，src和static目录,大神必备神器，导入即可，无需更改！
4款登陆页面模版
09-05
精美登陆页面！ 博客：http://blog.csdn.net/ajlgl?viewmode=contents 资源：http://download.csdn.net/user/ajlgl/uploads 百度云：https://pan.baidu.com/s/1dESLQY9
vue+elementUI管理系统，页面源代码
11-10
vue2+elementUI后台管理系统，页面源代码，src和static目录
VueAdmin:使用Vue+ElementUI搭建的管理系统的简单架子
05-28
vue-cli 进行构建对前端不是很了解 所以就是一边看一边搜 根据自己想要的修改了一些 整合自己的后端基础版本 完成了登录注销等 获取用户信息附带信息是写死的 使用SpringCloud Alibaba构建的 包含一些基础模块动态...
vue：结合elementUI设计网站登录页
m0_59588838的博客
11-04 3103
vue肝小项目ing
【Vue3从入门到项目实现】RuoYi-Vue3若依框架前端学习——登录页面
ly甲烷的博客
12-06 7143
若依前后端分离版， 前端Vue3学习——登录页面 验证码、登录功能前端实现梳理，与后端接口简单说明
Vue实现登录功能全套详解（含封装axios）
陈新科的博客
08-24 2万+
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token。
Vue+Element-ui创建一个登陆页面
qq_44155199的博客
08-07 1万+
Vue+Element-ui创建一个登陆页面 效果图 1.创建一个Vue项目 2.安装element-ui组件 3.安装sass-loader组件 4.编写代码 5.运行项目 在当前目录下安装elemrnt-ui PS D:\HBuilder\filer\MeetingManage> npm install element-ui -S 随后安装sass-loader PS D:\HBuilder\filer\MeetingManage> npm install sass-loader n
【前端】Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出
karshey的博客
11-14 3698
通用后台管理系统-登陆页面功能：登录权限跳转、路由守卫、退出
vue+elementui编写好看的登录界面
04-17
好的，我可以帮您解决这个问题。对于Vue ElementUI编写好看的登录界面，可以使用ElementUI提供的表单组件和按钮组件来构建登录页面，同时添加一些自定义的CSS样式以及背景图片等元素，来提升页面的美观性。另外，也可以考虑使用Vue框架提供的动画效果来增加页面的交互性和视觉体验。希望这些建议对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值