vue+ElementUI构造页面

最新推荐文章于 2025-03-18 13:35:11 发布

温凉要加油

最新推荐文章于 2025-03-18 13:35:11 发布

阅读量1.1k

点赞数 1

文章标签： elementui vue.js

本文链接：https://blog.youkuaiyun.com/luvzen0127/article/details/120270056

版权

本文档详细介绍了如何使用Vue和ElementUI搭建环境，创建登录页面及后台用户列表页面。从环境搭建开始，包括ElementUI的安装、登录页面的组件选择、数据与方法定义、路由配置，到页面美化、后台页面的路由和布局设置，以及模拟数据的使用、接口请求的封装等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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:

最低0.47元/天解锁文章