重庆人居建设集团网站,软文标题,公司网站开发实例,沈阳seo技术这是一个非常非常适合新手的vue登录界面#xff0c;总体来说美观大气#xff0c;axios那部分没有发#xff0c;有需要的大家可以自己进行二次开发#xff0c;继续编写。 用到了技术栈有 vue/cli 5.07 element-ui 2.15.9 适合入门级新手#xff0c;展示下页面
emmm验证码…这是一个非常非常适合新手的vue登录界面总体来说美观大气axios那部分没有发有需要的大家可以自己进行二次开发继续编写。 用到了技术栈有 vue/cli 5.07 element-ui 2.15.9 适合入门级新手展示下页面
emmm验证码什么的可以等有兴趣的人二次开发
好下面来讲述具体如何来实现这个页面。
一、创建vue项目
使用vue的脚手架创建项目然后把不需要的内容删去可以看到页面如下
需要注意的是你创建时候需要去勾选router选项,如果不勾选的话未来会很麻烦需要自己重新配置下载如何创建vue项目可以翻找我的博文我的博文里面有记载。
二、引入依赖
把需要的依赖引入这里我不打算讲太深就是很简单的把element-ui依赖下载 具体怎么下载打开terminal输入指令npm install element-ui -S就可以下载下载完可以在package.json可以看到
我这里有个axios不用在意因为我实现了前后端互联所以对于基础功能而言这些是不需要注意的
三、改造下项目
app.vue改造成如下样式
router下的index.js需要改变下因为新的页面为Login.vue
在assets下加入名为background的图片图片已取出放在下面了
对了差点忘了要改一下main.js
代码如下
import Vue from vue;
import router from ./router;
import ElementUI from element-ui;
import App from ./App.vue;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);
Vue.config.productionTip false;new Vue({router,render: (h) h(App),
}).$mount(#app);还有就是驼峰法则查的很严 要在vue.config.js上 控制下摆脱这东西
代码如下
const { defineConfig } require(“vue/cli-service”);
module.exports defineConfig({
transpileDependencies: true,
lintOnSave: false,
});四、写入Login视图
在views下创建Login.vue 代码如下
templatediv classbodyel-form :rulesrules refloginForm :modelloginForm classloginContainerh3 classloginTitle欢迎登录/h3el-form-item propusernameel-input typetext v-modelloginForm.username placeholder亲请输入用户名 /el-input/el-form-itemel-form-item proppasswordel-input typepassword v-modelloginForm.password placeholder亲请输入密码 /el-input/el-form-itemel-form-item propcodeel-input typetext auto-completefalse v-modelloginForm.code placeholder点击图片更换验证码 stylewidth: 250px;margin-right: 5px/el-inputimg :srccaptchaUrl/el-form-itemel-checkbox v-modelchecked classloginRemember记住我/el-checkboxel-button typeprimary stylewidth:100% clicksubmitLogin登录/el-button/el-form/div
/templatescript
export default {name: Login,data(){return{captchaUrl: ,loginForm:{username:admin,password:ssssss,code:},checked: true,rules:{username:[{required:true,message:请输入用户名,trigger:blur},{ min: 5, max: 14, message: 长度在 5 到 14 个字符, trigger: blur }],password:[{required:true,message:请输入密码,trigger:blur},,{ min: 6, message: 密码长度要大于6, trigger: blur }],code:[{required:true,message:请输入验证码,trigger:blur}],}}},methods:{submitLogin(){this.$refs.loginForm.validate((valid) {if (valid) {alert(提交成功);} else {this.$message.error(登录出错请重新输入);return false;}});}}
};
/scriptstyle langless scoped.loginContainer{border-radius: 15px;background-clip: padding-box;text-align: left;margin: auto;margin-top: 180px;width: 350px;padding: 15px 35px 15px 35px;background: aliceblue;border:1px solid blueviolet;box-shadow: 0 0 25px #f885ff;}.loginTitle{margin: 0px auto 48px auto;text-align: center;font-size: 40px;}.loginRemember{text-align: left;margin: 0px 0px 15px 0px;}.body{width: 100vw;height: 100vh;background-image: url(../assets/background.png) ;background-size:100%;overflow: hidden;}
/style
然后细细讲解下代码 style中主要控制登录框的位置以及如何去设计body那里样式是设计的全局背景图rules设置了检验规则避免无效登录设置成一失去焦点就会继续检查checked保证了登录功能后续开发巴拉巴拉一大堆但是很容易懂。
总结
然后希望这篇文章能够帮助到你快速掌握vue。也感谢有大佬提出意见页面样式一定要设置scoped,否则会影响后续的所有页面样式二次开发要注意希望大家引以为戒。
