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-passwordclearable /></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) returnformEl.validate(async (valid) => {if (valid) {submitting.value = truetry {submitting.value = falserouter.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;