个人购买域名做企业网站,wordpress怎样更改文章阅读次数,wordpress怎么自己写代码,国内电商网站跳出率是多少这里写自定义目录标题 登录创建项目配置环境变量#xff0c;方便使用登录页面验证码登陆表单 在VScode上写前端#xff0c;采用vue3。
登录
创建项目
检查node版本 node -v 创建一个新的项目 npm init vitelatest blog-front-admin 中间会弹出询问是否要安装包#xff0c… 这里写自定义目录标题 登录创建项目配置环境变量方便使用登录页面验证码登陆表单 在VScode上写前端采用vue3。
登录
创建项目
检查node版本 node -v 创建一个新的项目 npm init vitelatest blog-front-admin 中间会弹出询问是否要安装包选择“y”即可。然后依次选择Vue和JavaScript。
ps:刚刚我的位置建错了我换了一个位置重新建。
按照提示进入项目安装依赖并运行项目 cd blog-front-admin npm install npm run dev 删减得到一个干净的APP.vue 在src文件下新建路由文件并安装路由包 npm install vue-router4 --save 在src文件下新建视图文件然后在视图文件下新建Index.vue并简单写点东西写的时候输入“vue”然后选择vue3它会自动填充vue3模板。 在router里面新建index.js文件并补充完整简单的路由信息
import {createRouter,createWebHistory} from vue-router
const routes [{name:首页,path:/index,component:() import(../views/Index.vue),}
];const router createRouter({routes,history:createWebHistory(),
})export default router在main.js里面引用router在App.vue里面加入路由 运行结果。
配置环境变量方便使用
配置代理路径方便使用后端路径
server:{hmr:true,port:3001,proxy:{/api:{target:http://localhost:8081/,//目标代理接口地址secure:false,changeOrigin:true,//开启代理在本地创建一个虚拟服务端pathRewrite:{^/api:/api,},},},},配置本项目路径方便引用 resolve:{//配置路径别名alias: {:path.resolve(__dirname,./src),},},安装路径依赖并使用 npm install path --save 根据配置前面的代码做出相应修改 运行此时的路径端口变成了修改后的3001
登录页面
安装element-plus依赖并在main.js里面引入 npm install element-plus --save ps要做登录页那就把之前的Index.vue改为Login.vue以及修改路由。
在Login.vue里面试用element-plus 设置登陆背景安装相关依赖 npm install sass --save npm install sass-loader --save 然后设置背景图片注意把style.css里面的内容都清空添加简单的内容不然会有影响。对于height,不知道为什么使用“height:100%”就不对。 5. 使用表格
padding作用 注释的结果
没注释的结果
验证码 登陆表单 div classlogin-bodydiv classlogin-paneldiv classlogin-title用户登录/divel-form :modelformData :rulesrules refformDataRefel-form-item propaccountel-input placeholder请输入账号 v-modelformData.account sizelargetemplate #prefixspan classiconfont icon-account/span/template/el-input/el-form-item!-- 其他表单项 --/el-form/div
/div在这段代码中
div classlogin-body 和 div classlogin-panel 是用来布局和样式化登录表单的外部容器。div classlogin-title用户登录/div 显示了登录表单的标题。el-form 是 Element UI 提供的表单组件通过 :modelformData 绑定了表单数据对象 formData:rulesrules 绑定了表单验证规则对象 rulesrefformDataRef 为表单组件添加了引用名称 formDataRef。el-form-item propaccount 定义了一个表单项propaccount 指定了与 formData 对象中的 account 字段进行绑定。el-input 是 Element UI 提供的输入框组件通过 v-modelformData.account 实现了与 formData 中 account 字段的双向绑定placeholder 属性设置了输入框的占位符文本sizelarge 设置了输入框的尺寸为大号。template #prefix 中的内容是输入框的前缀这里使用了一个图标作为账号输入框的前缀图标具体的图标样式是通过类名 iconfont icon-account 来定义的。
这段代码片段展示了一个基本的使用 Element UI 实现的用户登录表单界面其中只包含了账号输入框的部分。你可以继续类似的方式添加密码输入框、登录按钮等其他表单元素以完善整个登录界面的功能。
全部代码以及效果
template
div classlogin-bodydiv classlogin-paneldiv classlogin-title用户登录/divel-form :modelformData:rulesrulesrefformDataRefel-form-item propaccountel-input placeholder请输入账号v-modelformData.accountsizelarge template #prefixspan classiconfont icon-account/span/template/el-input/el-form-itemel-form-item proppasswordel-input placeholder请输入密码v-modelformData.passwordsizelarge template #prefixspan classiconfont icon-password/span/template/el-input/el-form-itemel-form-item propcheckCodediv classcheck-code-panel
el-input placeholder请输入验证码v-modelformData.checkCode classinput-panelsizelarge/img :srccheckCodeUrlclasscheck-codeclickchangeCheckCode/div/el-form-itemel-form-item labelel-checkbox v-modelformData.rememberMe :labeltrue 记住我/el-checkbox
/el-form-itemel-form-item labelel-button typeprimary:style{width:100%}clicklogin 登录/el-button/el-form-item/el-form/div
/div/templatescript setup
import { reactive, ref } from vue;
const api{checkCode:api/checkCode
}
const checkCodeUrl ref(api.checkCode);
const changeCheckCode () {checkCodeUrl.value api.checkCode?new Date().getTime();
}//表单相关
const formDataRefref();
const formDatareactive({});const rules{account:[{required:true,message:请输入用户名,}],password:[{required:true,message:请输入密码,}],checkCode:[{required:true,message:请输入验证码,}]}const login (){formDataRef.value.validate((valid){
if(!valid){
return;
}});
}/scriptstyle langscss
.login-body{width: 100%;height: calc(100vh);background-image: url(../assets/login-bg.jpg);background-size: cover;background-position: center;.login-panel{float: right;margin-right: 100px;margin-top: 100px;padding: 20px;//内容不顶着边width: 350px;border-radius: 5px;//圆角box-shadow: 2px 2px 10px #ddd;//阴影background: rgba(255,255,255,0.7);
.login-title{font-size: 20px;text-align: center;margin-bottom: 10px;
}
.check-code-panel{width:100%;display:flex;align-items: center;.input-panel{// flex:1;// margin-right: 5px;}.check-code{// height: 30px;margin-right: auto;margin-left:5px;cursor:pointer;}
}
}
}/style
