系列文章目录

 第一章 

论vue3.0和vue2.0区别之编程方式及例子详解

第二章

同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令

第三章

vue3.0项目实战 - ElementUI框架版

第四章

【TypeScript】在vue3中遇到的问题及解决方案，未完待续

第五章

vue3.0项目实战系列文章 - 登录页面

---

目录

系列文章目录

前言

一、关于setup？

1.Vue3 的一大特性函数 ---- setup

2.为什么使用setup？

3.两个参数

4.项目中使用以下写法 

二、代码

总结

---

前言

坑千千万，踩好才有完美的框架~

---

一、关于setup？

1.Vue3 的一大特性函数 ---- setup

• setup函数是处于 生命周期函数 beforeCreate 和 Created 之前的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
• setup函数是 Composition API（组合API）的入口
• 在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法在模板中使用

2.为什么使用setup？

• data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说简直是噩梦。而通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑了。
• 写一个大型组件时，逻辑关注点的列表很长，不利于维护和阅读；所以需要把一个逻辑关注点的代码收集在一起会更好，由此诞生组合式API，即vue中用到的setup。

3.两个参数

• setup ( props , context )

① props : 响应式的，不能被解构，非要解构可用toRefs

② context :非响应式的，可以被解构，就是一个普通的js对象，作用是暴露其他可用的值（attrs、slots、emit、expose）

• 组件的属性：只能访问以下四种：props、attrs、slots、emit

4.项目中使用以下写法 

<script lang="ts">
    import {
        ref,
        reactive
    } from "vue";
    import {
        useStore
    } from "vuex";
    import {
        useRouter
    } from "vue-router";
    import {
        ElMessage
    } from "element-plus";
 
    export default {
        setup() {
          
        },
    };
script>

二、代码

<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">后台管理系统div>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" placeholder="username">
                        <template #prepend>
                            <el-button icon="el-icon-user">el-button>
                        template>
                    el-input>
                el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="password" v-model="ruleForm.password">
                        <template #prepend>
                            <el-button icon="el-icon-lock">el-button>
                        template>
                    el-input>
                el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">登录el-button>
                div>
                <p class="login-tips">Tips : 用户名和密码随便填。p>
            el-form>
        div>
    div>
template>
 
<script lang="ts">
    import {
        ref,
        reactive
    } from "vue";
    import {
        useStore
    } from "vuex";
    import {
        useRouter
    } from "vue-router";
    import {
        ElMessage
    } from "element-plus";
    import {
        roleList
    } from "../request/api.js";
 
    export default {
        setup() {
            const router = useRouter();
            const ruleForm = reactive({
                username: "admin",
                password: "123123",
            });
            const rules = {
                username: [{
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur",
                }],
                password: [{
                    required: true,
                    message: "请输入密码",
                    trigger: "blur"
                }],
            }; // 一个普通对象，修改后不会被proxy拦截，进而页面也不会动态更新
            const ruleFormRef = ref('');
            const submitForm = async (formEl) => {
                if (!formEl) return
                formEl.validate((valid) => {
                    if (valid) {
                        submitFormLink();
                    } else {
                        ElMessage.error("登录失败");
                        return false;
                    }
                });
            };
            // 使用响应式函数reactive构建proxy响应式对象
            const params = reactive({
                pageNum: 1,
                pageSize: 10,
                systemFlag: 'water'
            })
            const submitFormLink = () => {
                roleList(params).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            showClose: true,
                            message: '登录成功',
                            type: 'success',
                        })
                        // ElMessage.success('登录成功')
                        localStorage.setItem("ms_username", ruleForm.username);
                        router.push("/");
                    } else if (res.code !== 0) {
                        ElMessage.error(res.msg)
                    }
                })
            };
            const store = useStore();
            store.commit("clearTags");
            // 使用时，要把对象return出去，才能在template中使用
            return {
                ruleForm,
                rules,
                ruleFormRef,
                submitForm,
                params,
                submitFormLink
            };
        },
    };
script>
 
<style scoped>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../assets/img/login-bg.jpg);
        background-size: 100%;
    }
 
    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
 
    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }
 
    .ms-content {
        padding: 30px 30px;
    }
 
    .login-btn {
        text-align: center;
    }
 
    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }
 
    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
style>

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了登录页面的使用，未完待续。