中国风网站模板html,违法网站开发者,个人怎么做ckmov解析网站,小说网站用什么虚拟主机使用vite初始化项目
确保你的开发环境中已经安装了Node.js#xff0c;而且有npm#xff0c;yarn等包管理工具#xff0c;然后可以按照vite官方提供的方式初始化项目#xff1a;
yarn create vite跟随提示选择即可#xff1a;
或者可以直接克隆下面的仓库 https://gith…使用vite初始化项目
确保你的开发环境中已经安装了Node.js而且有npmyarn等包管理工具然后可以按照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文件用来处理登录页面的样式和登录、注册校验等逻辑。
templatediv classlogin-containerdiv classlogin-form v-ifmode loginh1Hello!/h1h2欢迎来到 Vue Admin TS!/h2el-form :modelform refruleFormRef :rulesrulesel-form-item label propnameel-input v-modelform.name :prefix-iconUser sizelarge placeholder用户名 clearable //el-form-itemel-form-item label proppasswordel-input v-modelform.password :prefix-iconLock sizelarge placeholder密码 show-password clearable //el-form-itemel-button :loadingsubmitting :loading-iconEleme sizelarge typeprimary stylewidth: 50%clickconfirm(ruleFormRef)登录/el-button/el-formdivel-link typeprimary clickswitchMode(register)没有账号去注册/el-link/div/divdiv classlogin-form v-ifmode registerh1注册账号/h1h2速度超快注册账号后免费试用!/h2el-form :modelregisterForm refregisterFormRef :rulesrulesel-form-item label propnameel-input v-modelregisterForm.name :prefix-iconUser sizelarge placeholder用户名 clearable //el-form-itemel-form-item label proppasswordel-input v-modelregisterForm.password :prefix-iconLock sizelarge placeholder密码 show-passwordclearable //el-form-itemel-form-item label propconfirm_passwordel-input v-modelregisterForm.confirm_password :prefix-iconLock sizelarge placeholder确认密码show-password clearable //el-form-itemel-button sizelarge typeprimary stylewidth: 50% clicksubmit提交/el-button/el-formdivel-link typeprimary clickswitchMode(login)去登录/el-link/div/divVatFooter themedark //div
/templatescript setup langts
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-routerconst ruleFormRef refFormInstance()
const form reactive({name: ,password:
})const rules reactiveFormRules({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 refFormInstance()
function submit() {registerFormRef.value?.validate(async (valid) {if (valid) {ElMessage.success(注册成功)}})
}
/scriptstyle scoped langscss
.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下一篇做一下首页的页面布局。
