1-项目搭建
1. 搭建工具 (vue create)
步骤
- 打开cmd运行
vue create 你的项目名称 - 在选项里面选择 Manually select features
- 使用 空格 选中 Babel、TypeScript、Router、Vuex
- Enter 选择 3.X
- 选择配置 Less
- Use history mode 选择 Y
- Save this as a preset 选择 N
- 项目创建完成
Less than 1 minute
2-登陆界面书写
1. CSS重置
- 在文件的 /public/ 下新建文件 /css/reset.css文件
-
百度搜索 reset.css 将代码复制并粘贴至css文件
-
将CSS文件link到html文件
2. 下载 Element-Plus
Element-Plus官网：https://element-plus.gitee.io/zh-CN
About 3 min
3-代码抽离
提示
基于第二步编辑的代码
文件结构如图：
1. 抽离登录界面表单
1. 在 components 文件夹内创建 LoginForm.vue 文件，并将登陆表单抽离到此处
<!-- 组件化 -->
<template>
<el-form ref="loginForm" :model="loginUser" :rules="rules" class="loginForm sign-in-form">
<div class="titletext">登录Demo</div>
<el-form-item prop="email">
<el-input v-model="loginUser.email" placeholder="请输入账号" />
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginUser.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleLogin('loginForm')" class="submit-btn">登陆</el-button>
</el-form-item>
<div class="register-btn" >立即注册</div>
</el-form>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
// setup 中使用 defineProps 来获取父组件传递的值
const props = defineProps({
loginUser: {
type: Object,
required: true
},
rules: {
type: Object,
required: true
}
})
// @ts-ignore
const { ctx } = getCurrentInstance()
const handleLogin = (formName: String): void => {
ctx.$refs[formName].validate((valid: boolean) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!')
return false
}
})
}
</script>
<style lang="less">
.loginForm {
position: relative;
top: 10px;
}
.titletext {
width: 100%;
text-align: center;
color: #409EFF;
font-size: 24px;
margin: -20px 0 20px 0;
}
.submit-btn {
width: 100%
}
.register-btn {
text-align: center;
font-size: 0.5rem;
color: cornflowerblue;
cursor: pointer;
}
</style>
About 2 min
4-注册界面
提示
由于我们上一篇已经使用了代码抽离和组件的引入，所以本章直接使用该方式编辑代码
1. 编辑注册表单组件
在 components 文件夹内创建 RegisterForm.vue 文件，代码如下：
<template>
<el-form ref="registerForm" :model="registerUser" :rules="registerRules" class="registerForm sign-up-form">
<div class="titletext" style="margin-top: 5rem;">注册Demo</div>
<el-form-item prop="name">
<el-input v-model="registerUser.name" placeholder="请输入用户名" />
</el-form-item>
<el-form-item prop="email">
<el-input v-model="registerUser.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="registerUser.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item prop="password2">
<el-input type="password" v-model="registerUser.password2" placeholder="请再次输入密码确认" />
</el-form-item>
<el-form-item>
<el-select type="password" v-model="registerUser.role" placeholder="选择你的角色" style="width: 100%;">
<el-option lable="管理员" value="管理员">管理员</el-option>
<el-option lable="用户" value="用户">用户</el-option>
<el-option lable="游客" value="游客">游客</el-option>
</el-select>
</el-form-item>
<el-form-item>
<!-- -->
<el-button type="primary" @click="handleRregister('registerForm')" class="submit-btn">注册</el-button>
</el-form-item>
<div class="register-btn">去登陆</div>
</el-form>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
const props = defineProps({
registerUser: {
type: Object,
required: true
},
registerRules: {
type: Object,
required: true
}
})
// @ts-ignore
const { ctx } = getCurrentInstance()
const handleRregister = (formName: String): void => {
ctx.$refs[formName].validate((valid: boolean) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!')
return false
}
})
}
</script>
<style scoped>
</style>
About 3 min
导航网站
Less than 1 minute
批处理
Less than 1 minute