vue+ElementUI构造页面

1、环境搭建

在项目目录下cmd

vue create cms-pj

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

安装成功

cd cms-pj
yarn serve

在这里插入图片描述

项目就跑起来了
在这里插入图片描述

ElementUI下载 组件 | Element

yarn add element-ui

在这里插入图片描述

目录结构:
在这里插入图片描述

在目录src/main.js下引入ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2、登录页面

2-1 在views目录右击新建找到vueComponent 建立Login页面

在这里插入图片描述

2-2 可以在element-ui组件里找喜欢的表单

组件 | Element–form

<template>
    <!--wrap 包裹-->
    <div class="login-wrap">
        <h2>登录页面</h2>
        <!--
        ref:代表是对当前的dom元素的一个引用
        ruleForm:接收数据
        rules:定义规则
        resetForm:表单重置
        submitForm:表单提交
        -->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="login-form">
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

2-3 定义data:

data(){
   
    return{
   
        //用于接收数据
        ruleForm:{
   
            username:'',
            password:'',

        },
        //进行表单验证
        rules:{
   
            username: [
                {
   required: true, message: '用户名不能为空', trigger: 'blur'},
                {
   min: 2, max: 10, message: '用户名长度在 2 到 10 个字符', trigger: 'blur'},
            ],
            password: [
                {
   required: true, message: '密码不能为空', trigger: 'blur'},
                {
   min: 2, max: 10, message: '密码长度在 2 到 10 个字符', trigger: 'blur'},

            ],
        }
    }
}

2-4 定义方法:

methods:{
   
    /*表单提交*/
    submitForm() {
   
        /*如果验证通过的时候,完成提交*/
        this.$refs['ruleForm'].validate((valid) => {
   
            if (valid) {
   
                //表单验证成功(调用登录接口,获取 token 凭证,然后在本地存储)
                //这里并未实现token
                this.$message({
   
                    message: '登录成功!',
                    type: 'success'
                });
                /* 前往后台的首页 */
                this.$router.push('/admin'); // 前往后台的首页

            } else {
   
                /* 验证失败 提示 */
                this.$message.error('用户名或者密码验证不通过!');
                return false;
            }
        });

    },

    /*表单重置*/
    resetForm() {
   
    }
},

2-5 创建router/index.js引入登录路由

import Login from '../views/Login.vue'
const routes = [
  {
   
    path: '/'
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值