要写一个网页界面，一般都是从登陆注册开始的。
我们直接使用element-plus来写登陆注册页面。
下载element-plus
npm install element-plus --save引入element-plus
之前我们说过js的入口在main.js李，引入组件也是在这里引入的。在main.js中修改如下内容：
import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')编写login页面
引入element-plus后就可以编写登陆界面了，前面我们说过vue采用组件化和模块化开发，这里我们开发一个login组件，并在app里引入该组件。
login.vue的内容如下所示：
<template>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
<el-form-item label="Username" prop="username">
<el-input v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">Login</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
}
};
},
methods: {
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 在这里处理登录逻辑，比如发送请求给后端验证登录信息
console.log('Logging in...');
} else {
return false;
}
});
}
}
};
</script>
<style scoped>
.login-form {
width: 300px;
margin: 0 auto;
}
</style>需要注意的是上面的登陆界面还没有美化，即设置css样式，这个后面再来添加，前期先保证功能。
同时上面的界面只有登陆，如果我想要实现没有用户，用户要进行注册，跳转到注册页面，此时就需要引入路由，实现页面跳转。
引入路由
npm install vue-router@4 --save路由一般放在router目录下，并新建一个index.js文件来存放路由信息，下面是index.js的内容。
import { createRouter, createWebHistory } from 'vue-router';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';
const routes = [
{
path: '/',
redirect: '/login' // 将根路径重定向到登录页面
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
当前我们只有login和register两个界面，所以这里只注册了两个路由，后面随着页面的增加可以将其再添加到这个文件里。
添加的register页面内容如下所示：
<template>
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px" class="register-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="registerForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="repassword">
<el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
registerForm: {
username: '',
password: ''
},
registerRules: {
username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
}
};
},
methods: {
register() {
this.$refs.registerForm.validate(valid => {
if (valid) {
// 在这里处理注册逻辑，比如发送请求给后端保存用户信息
console.log('Registering...');
} else {
return false;
}
});
}
}
};
</script>
<style scoped>
.register-form {
width: 300px;
margin: 0 auto;
}
</style>默认登录的是登陆界面，需要在登陆界面进行跳转，登录界面修改如下：
<template>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
<el-button type="primary" @click="goToRegisterPage">注册</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
}
};
},
methods: {
login() {
// 登录逻辑
console.log('Logging in...');
},
goToRegisterPage() {
this.$router.push('/register');
}
}
};
</script>
<style scoped>
.login-form {
width: 300px;
margin: 0 auto;
}
</style>
定义好路由后还是需要在main.js引入定义的路由,修改main.js里的内容如下：
import { createApp } from 'vue'
import './style.css'
import router from './router'; // 引入路由文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')引入router后还需要把route-view设置到App.vue里，否则无法实现跳转。
App.vue的内容如下所示：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
