文章目录
前期准备
安装vue-cli
npm install vue-cli -g
初始化项目
vue init webpack vuecliTest
Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git的作者，他会读取。
Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。
安装elementUI
cd vuecliTest进入到项目目录，执行指令 ：npm i element-ui -S
在 main.js 文件中引入 elementui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/reset.css'
import 'element-ui/lib/theme-chalk/index.css'
//Vue.config.productionTip = false
Vue.use(ElementUI)
安装项目依赖包
npm install
运行
npm run dev开发模式下运行我们的程序。
登陆注册界面原型
App.vue修改
<template>
<div id="app">
<router-view/>
</div>
</template>
router/index.js修改
import Vue from 'vue'
import Router from 'vue-router'
import Hi from '@/components/Hi'
import Login from '@/components/Login'
import Register from '@/components/Register'
import ForgotPassword from '@/components/ForgotPassword'
import ResetPassword from '@/components/ResetPassword'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Hi',
name: 'Hi',
component: Hi
},
{
path: '/Login',
name: 'Login',
component: Login,
},
{
path: '/Register',
name: 'Register',
component: Register,
},
{
path: '/ForgotPassword',
name: 'ForgotPassword',
component: ForgotPassword,
},
{
path: '/ResetPassword',
name: 'ResetPassword',
component: ResetPassword,
}
]
})
新建Login.vue(此处按钮响应🚩后续再补
<template>
<div id="page">
<div id="card" text-align: center>
<el-form :model="form" >
<br>
<h1>用户登录</h1>
<el-form-item>
<el-input placeholder="请输入登录邮箱" v-model="form.userMail"/>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入用户密码" v-model="form.userPassword" show-password/>
</el-form-item>
<el-form-item>
<el-button @click="onSubmit()" type="primary" round >登录</el-button>
</el-form-item>
<el-row>
<el-col :span="12">
<el-button type="text">现在注册</el-button>
</el-col>
<el-col :span="12">
<el-button type="text" style="color:grey">忘记密码</el-button>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return {
form:{
userMail:'',
userPassword:''
}
}
},
methods:{
onSubmit(){
console.log('form');
}
}
}
</script>
<style scoped>
#card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
text-align: center;
margin-left: 30%;
}
.el-form{
width:40%;
margin: auto;
height:20%;
}
.el-button{
width: 50%;
}
</style>
Ps:以我的审美就做到这步了，挺好看的了emmmmm
按键跳转
toRegister(){
this.$router.push('/Register')
}
注册界面（🚩
<template>
<div id="card" text-align: center>
<el-form :model="form" >
<br>
<h1>用户注册</h1>
<el-form-item>
<el-input placeholder="请输入作者名" v-model="form.userName"/>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入注册邮箱" v-model="form.userMail"/>
<p :style="{color:'red','font-size':'10px'}">{{ mailVerification }}</p>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入6-12位密码，至少包括大写字母小写字母数字" v-model.lazy="form.userPassword" show-password/>
<p :style="{color:'red','font-size':'10px'}">{{ passwordVerification }}</p>
</el-form-item>
<el-form-item>
<el-input placeholder="请再次输入密码" v-model.lazy="form.userPasswordAgain" show-password/>
<p :style="{color:'red','font-size':'10px'}">{{ passwordCheck}}</p>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item>
<el-input placeholder="请输入收到的验证码" v-model="form.userCheck"/>
</el-form-item>
</el-col>
<el-col :span="12">
<!--需要后期加上一分钟发送一次验证码-->
<el-button >发送验证码</el-button>
</el-col>
</el-row>
<br>
<el-form-item>
<el-button @click="onSubmit()" type="primary" round >提交注册</el-button>
</el-form-item>
<br>
</el-form>
</div>
</template>
<script>
export default {
name: 'Register',
data() {
return {
form:{
userName:'',
userMail:'',
userPassword:'',
userPasswordAgain:'',
userCheck:''
}
}
},
computed:{
mailVerification() {
//登录名@主机名.域名
var reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
if (this.form.userMail == ''){
return "";
}
else if (!reg.test(this.form.userMail)){
return "格式错误!正确格式：登录名@主机名.域名";
}
},
passwordVerification() {
//6-12位，至少包括一个大写字母、一个小写字母、一个数字、不能有特殊字符
var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*?[#?!@@$%^&*-]).{6,12}$/;
if (this.form.userPassword == ''){
return "";
}
else if (!reg.test(this.form.userPassword)){
return "格式错误!正确格式：6-12位，包含大小写字母数字,不能有特殊字符";
}
},
passwordCheck(){
if(this.form.userPasswordAgain!=undefined&&this.form.userPassword==this.form.userPasswordAgain){
return "";
}
else if(this.form.userPasswordAgain=='')
return "";
else return "两次输入密码不一致"
}
},
methods:{
onSubmit(){
console.log('form');
},
}
}
</script>
<style scoped>
#card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 60%;
border-radius: 5px;
text-align: center;
margin-left: 20%;
}
.el-form{
width:55%;
margin: auto;
height:20%;
}
.el-button{
width: 50%;
}
.p{
color:red;
font-size: 10px;
}
</style>
修改密码（🚩
验证身份(🚩
<template>
<div id="card" text-align: center>
<el-form :model="form" >
<br>
<h1>找回密码</h1>
<el-form-item>
<el-input placeholder="请输入绑定邮箱" v-model="form.userMail"/>
<p :style="{color:'red','font-size':'10px'}">{{ mailVerification }}</p>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item>
<el-input placeholder="请输入收到的验证码" v-model="form.userCheck"/>
</el-form-item>
</el-col>
<el-col :span="12">
<!--需要后期加上一分钟发送一次验证码-->
<el-button >发送验证码</el-button>
</el-col>
</el-row>
<br>
<el-form-item>
<el-button @click="onSubmit()" type="primary" round >修改密码</el-button>
</el-form-item>
<br>
</el-form>
</div>
</template>
<script>
export default {
name: 'ForgotPassword',
data() {
return {
form:{
userMail:'',
userCheck:''
}
}
},
computed:{
mailVerification() {
//登录名@主机名.域名
var reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
if (this.form.userMail == ''){
return "";
}
else if (!reg.test(this.form.userMail)){
return "格式错误!正确格式：登录名@主机名.域名";
}
},
},
methods:{
onSubmit(){
console.log('form');
//需要从后台获取验证码数据加个判断是否一致，插旗
//好像应该带参数把邮箱一起传过去，插旗
this.$router.push('/ResetPassword')
},
}
}
</script>
<style scoped>
#card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
text-align: center;
margin-left: 30%;
}
.el-form{
width:80%;
margin: auto;
height:20%;
}
.el-button{
width: 50%;
}
.p{
color:red;
font-size: 10px;
}
</style>
修改密码(🚩
<template>
<div id="card" text-align: center>
<el-form :model="form" >
<br>
<h1>重置密码</h1>
<el-form-item>
<el-input placeholder="请输入6-12位密码，至少包括大写字母小写字母数字" v-model.lazy="form.userPassword" show-password/>
<p :style="{color:'red','font-size':'10px'}">{{ passwordVerification }}</p>
</el-form-item>
<el-form-item>
<el-input placeholder="请再次输入密码" v-model.lazy="form.userPasswordAgain" show-password/>
<p :style="{color:'red','font-size':'10px'}">{{ passwordCheck}}</p>
</el-form-item>
<br>
<el-form-item>
<el-button @click="onSubmit()" type="primary" round >提交修改</el-button>
</el-form-item>
<br>
</el-form>
</div>
</template>
<script>
export default {
name: 'ResetPassword',
data() {
return {
form:{
userMail:'',
userPassword:'',
userPasswordAgain:'',
}
}
},
computed:{
passwordVerification() {
//6-12位，至少包括一个大写字母、一个小写字母、一个数字、不能有特殊字符
var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?!.*?[#?!@@$%^&*-]).{6,12}$/;
if (this.form.userPassword == ''){
return "";
}
else if (!reg.test(this.form.userPassword)){
return "格式错误!正确格式：6-12位，包含大小写字母数字,不能有特殊字符";
}
},
passwordCheck(){
if(this.form.userPasswordAgain!=undefined&&this.form.userPassword==this.form.userPasswordAgain){
return "";
}
else if(this.form.userPasswordAgain=='')
return "";
else return "两次输入密码不一致"
}
},
methods:{
onSubmit(){
console.log('form');
},
}
}
</script>
<style scoped>
#card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
border-radius: 5px;
text-align: center;
margin-left: 30%;
}
.el-form{
width:55%;
margin: auto;
height:20%;
}
.el-button{
width: 50%;
}
.p{
color:red;
font-size: 10px;
}
</style>
去掉路径里的#
mode: 'history', //去掉url中的#
部分界面不显示导航栏
- 创建导航栏文件
- 修改路由文件
给要显示导航栏的路由中加入
meta:{
keepAlive:true//导航栏在该页面显示
}
3. App.vue中引入和使用组件
9711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
