vue+ElementUI构造页面_vue+element 页面

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);
1
2
3
4

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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'},

            ],
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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() {
   
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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