Vue3+Element Plus+TS开发企业管理后台(二)

使用vite初始化项目

确保你的开发环境中已经安装了Node.js，而且有npm，yarn等包管理工具，然后可以按照vite官方提供的方式初始化项目：

yarn create vite

跟随提示选择即可：

或者可以直接克隆下面的仓库
https://github.com/iicoom/vat

安装项目依赖

➜  vat yarn add vue-router element-plus echarts nprogress

新增router、layouts目录

在src目录下新增router用于配制项目路由，layouts用于存放项目的布局组建。

在layouts中新增login.vue文件用来处理登录页面的样式和登录、注册校验等逻辑。

<template>
  <div class="login-container">
    <div class="login-form" v-if="mode === 'login'">
      <h1>Hello!</h1>
      <h2>欢迎来到 Vue Admin TS!</h2>
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item label="" prop="name">
          <el-input v-model="form.name" :prefix-icon="User" size="large" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="form.password" :prefix-icon="Lock" size="large" placeholder="密码" show-password clearable />
        </el-form-item>
        <el-button :loading="submitting" :loading-icon="Eleme" size="large" type="primary" style="width: 50%"
          @click="confirm(ruleFormRef)">登录</el-button>
      </el-form>
      <div>
        <el-link type="primary" @click="switchMode('register')">没有账号？去注册</el-link>
      </div>
    </div>
    <div class="login-form" v-if="mode === 'register'">
      <h1>注册账号</h1>
      <h2>速度超快，注册账号后免费试用!</h2>
      <el-form :model="registerForm" ref="registerFormRef" :rules="rules">
        <el-form-item label="" prop="name">
          <el-input v-model="registerForm.name" :prefix-icon="User" size="large" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input v-model="registerForm.password" :prefix-icon="Lock" size="large" placeholder="密码" show-password
            clearable />
        </el-form-item>
        <el-form-item label="" prop="confirm_password">
          <el-input v-model="registerForm.confirm_password" :prefix-icon="Lock" size="large" placeholder="确认密码"
            show-password clearable />
        </el-form-item>
        <el-button size="large" type="primary" style="width: 50%" @click="submit">提交</el-button>
      </el-form>
      <div>
        <el-link type="primary" @click="switchMode('login')">去登录</el-link>
      </div>
    </div>
    <VatFooter theme="dark" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import VatFooter from '@/components/VatFooter.vue'
import { User, Lock, Eleme } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElNotification, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const ruleFormRef = ref<FormInstance>()
const form = reactive({
  name: '',
  password: ''
})

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入' }],
  password: [{ required: true, message: '请输入' }],
  confirm_password: [
    { required: true, message: '请输入' },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error("两次输入的密码不匹配！"))
        } else {
          callback()
        }
      }
    }
  ]
})

const router = useRouter()
const submitting = ref(false)
function confirm(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        submitting.value = false
        router.push({ path: '/' })
        ElNotification({
          title: '欢迎登录 VAT!',
          message: '',
          type: 'success',
          showClose: false
        })
      } catch (e) {
        submitting.value = false
      }
    }
  })
}

document.onkeydown = function (event) {
  if (event.key === 'Enter') {
    confirm(ruleFormRef.value)
  }
}

const mode = ref('login')
function switchMode(val: string) {
  mode.value = val
}

const registerForm = reactive({
  name: '',
  password: '',
  confirm_password: '',
})
const registerFormRef = ref<FormInstance>()
function submit() {
  registerFormRef.value?.validate(async (valid) => {
    if (valid) {
      ElMessage.success('注册成功！')
    }
  })
}
</script>

<style scoped lang="scss">
.login-container {
  background-image: url(@/assets/login-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;

  .login-form {
    position: fixed;
    top: 50%;
    right: 100px;
    background-color: rgb(102, 51, 153, 0.4);
    height: 70%;
    overflow-y: scroll;
    width: 28%;
    transform: translateY(-50%);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #fff;

    h1 {
      font-size: 50px;
    }
  }

  .login-form::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 480px) {
  .login-form {
    width: 90% !important;
    right: 5% !important;
  }
}
</style>

在router中新增index.ts管理项目路由

import { createRouter, createWebHistory } from "vue-router";
import LoginLayout from "../layouts/login.vue";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/login",
      name: "Login",
      component: LoginLayout,
    },
  ],
});

NProgress.configure({
  easing: "ease",
  speed: 500,
  trickleSpeed: 200,
  showSpinner: false,
});

export default router;

现在我们启动项目访问http://localhost:5174/login，你本地的端口可能不是5174，按你自己的实际情况访问。

这样登录注册页面就完成了，并且在移动端浏览器中访问也有不错的样式。

OK，下一篇做一下首页的页面布局。