建议大家先去看我第一篇小兔鲜的文章，强烈建议，非常建议，十分建议，从头开始看更完整。
最近正在学习vue3小兔鲜，
下面是学习笔记

登录模块

路由与组件

目标：登录组件在书写一级路由的时候已经准备，添加路由链接跳转到登录页即可。

添加跳转链接：src/components/app-topnav.vue

<li><RouterLink to="/login">请先登录</RouterLink></li>

结构布局-CV

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ismlX4gn-1668072991723)(media/01-16459813154986.png)]

静态结构参考代码 - CV

<script setup lang="ts">
//
</script><template><div class="page-login"><!-- 1. 头部 --><header class="login-header"><div class="container"><h1 class="logo"><RouterLink to="/">小兔鲜</RouterLink></h1><h3 class="sub"><slot>欢迎登录</slot></h3><RouterLink class="entry" to="/">进入网站首页<i class="iconfont icon-angle-right"></i><i class="iconfont icon-angle-right"></i></RouterLink></div></header><!-- 2. 主体登录区域 --><section class="login-section"><div class="wrapper"><nav><a href="javascript:;">账户登录</a></nav><LoginForm /></div></section><!-- 3. 底部 --><footer class="login-footer"><div class="container"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight &copy; 小兔鲜儿</p></div></footer></div>
</template><style scoped lang="less">
// 头部样式
.login-header {background: #fff;border-bottom: 1px solid #e4e4e4;.container {display: flex;align-items: flex-end;justify-content: space-between;}.logo {width: 200px;a {display: block;height: 132px;width: 100%;text-indent: -9999px;background: url(@/assets/images/logo.png) no-repeat center 18px / contain;}}.sub {flex: 1;font-size: 24px;font-weight: normal;margin-bottom: 38px;margin-left: 20px;color: #666;}.entry {width: 120px;margin-bottom: 38px;font-size: 16px;i {font-size: 14px;color: @xtxColor;letter-spacing: -5px;}}
}
// 主体样式
.login-section {background: url(@/assets/images/login-bg.png) no-repeat center / cover;height: 488px;position: relative;.wrapper {width: 380px;background: #fff;position: absolute;left: 50%;top: 54px;transform: translate3d(100px, 0, 0);box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);nav {font-size: 14px;height: 55px;margin-bottom: 20px;border-bottom: 1px solid #f5f5f5;display: flex;padding: 0 40px;text-align: right;align-items: center;a {flex: 1;line-height: 1;display: inline-block;font-size: 18px;position: relative;text-align: center;}}}
}// 底部样式
.login-footer {padding: 30px 0 50px;background: #fff;p {text-align: center;color: #999;padding-top: 20px;a {line-height: 1;padding: 0 10px;color: #999;display: inline-block;~ a {border-left: 1px solid #ccc;}}}
}
</style>

表单布局-CV

目标：实现登录页面的整体大结构布局

新建表单组件

src/views/Login/components/login-form.vue

<script setup lang="ts">
//
</script><template><div class="account-box"><div class="form"><div class="form-item"><div class="input"><i class="iconfont icon-user"></i><input type="text" placeholder="请输入用户名或手机号" /></div><!-- 表单验证错误信息提示 --><!-- <div class="error"><i class="iconfont icon-warning" />请输入手机号</div> --></div><div class="form-item"><div class="input"><i class="iconfont icon-lock"></i><input type="password" placeholder="请输入密码" /></div></div><div class="form-item"><div class="agree"><XtxCheckBox /><span>我已同意</span><a href="javascript:;">《隐私条款》</a><span>和</span><a href="javascript:;">《服务条款》</a></div></div><a href="javascript:;" class="btn">登录</a></div><div class="action"><imgsrc="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"alt=""/><div class="url"><a href="javascript:;">忘记密码</a><a href="javascript:;">免费注册</a></div></div></div>
</template><style lang="less" scoped>
// 账号容器
.account-box {.toggle {padding: 15px 40px;text-align: right;a {color: @xtxColor;i {font-size: 14px;}}}.form {padding: 0 20px;&-item {margin-bottom: 28px;.input {position: relative;height: 36px;> i {width: 34px;height: 34px;background: #cfcdcd;color: #fff;position: absolute;left: 1px;top: 1px;text-align: center;line-height: 34px;font-size: 18px;}input {padding-left: 44px;border: 1px solid #cfcdcd;height: 36px;line-height: 36px;width: 100%;&.error {border-color: @priceColor;}&.active,&:focus {border-color: @xtxColor;}}.code {position: absolute;right: 1px;top: 1px;text-align: center;line-height: 34px;font-size: 14px;background: #f5f5f5;color: #666;width: 90px;height: 34px;cursor: pointer;}}> .error {position: absolute;font-size: 12px;line-height: 28px;color: @priceColor;i {font-size: 14px;margin-right: 2px;}}}.agree {a {color: #069;}}.btn {display: block;width: 100%;height: 40px;color: #fff;text-align: center;line-height: 40px;background: @xtxColor;&.disabled {background: #cfcdcd;}}}.action {padding: 20px 40px;display: flex;justify-content: space-between;align-items: center;.url {a {color: #999;margin-left: 10px;}}}
}
</style>

登录模块入口组件 src/views/Login/index.vue

在主体登录区域引入并使用表单组件。

<script setup lang="ts">
import LoginForm from "./components/login-form.vue";
</script><template><div class="page-login"><!-- 1. 头部 --><header class="login-header">....</header><!-- 2. 主体登录区域 --><section class="login-section"><div class="wrapper"><nav><a href="javascript:;">账户登录</a></nav><LoginForm /></div></section><!-- 3. 底部 --><footer class="login-footer">....</footer></div>
</template>

消息提示组件和复选框组件

组件外观

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mqc5JFik-1668072991725)(media/05-1627943191361.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjHBxdKU-1668072991727)(assets/image-20210803065321123.png)]

XtxCheckBox 组件使用

<script setup lang="ts">
import { ref } from "vue";const isAgree = ref(false);
</script><XtxCheckBox v-model="isAgree">我已同意</XtxCheckBox>

Message 组件使用

Message 组件支持函数和组件两种调用方式：

函数调用 - 推荐

vue3小兔鲜商城项目学习笔记+资料分享05相关推荐

vue3小兔鲜商城项目学习笔记+资料分享06
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记购物车模块购物车功能分析 [外链图片转存失败,源站可能有防盗链机制, ...
vue3小兔鲜商城项目学习笔记+资料分享08
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记支付模块路由和组件任务目标: 完成支付页路由和组件 [外链图片转存 ...
vue3小兔鲜商城项目学习笔记+资料分享09
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记会员中心模块个人中心个人中心-路由配置本节目标:个人中心二级路由 ...
vue3小兔鲜商城项目学习笔记+资料分享03
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜下面是学习笔记顶级类目目标:主要讲解开发时路由处理的要点,列表渲染部分自己课后实现 ...
vue3小兔鲜商城项目学习笔记+资料分享01
最近正在学习vue3小兔鲜,需要相关学习资料的可以点链接 https://docs.qq.com/doc/DUmhUVERtUHpLaG1a 下面试学习笔记项目起步项目预览地址小兔鲜儿商城:ht ...
vue3小兔鲜商城项目学习笔记+资料分享04
最近正在学习vue3小兔鲜, 下面是学习笔记详情模块目标:界面渲染部分我们快速准备,详情模块的重点都在组件封装. 基础布局和路由任务目标: 完成商品详情的基础布局和路由配置 [外链图片转存失败, ...
vue3小兔鲜商城项目学习笔记+资料分享07
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 下面是学习笔记填写订单模块填写订单实现本节目标: 实现填写订单跳转填写订单页组件和路由 1)准备填写订单页 ...
web基础阶段的小兔鲜儿项目学习
小兔鲜儿 1. 所用素材 2. 项目文件介绍 3. index页面的基本骨架 4. 思路:先写外面大盒子和版心,由外往内写 5. 源码: 6. 代码的一些命名 1. 所用素材素材链接,点我跳转:ht ...
小兔鲜儿项目pc客户端前端静态页面
小兔鲜儿项目pc客户端前端静态页面一.效果图二.文件和目录准备新建index.html在根目录新建css文件夹保存网站的样式,并新建以下css文件: base.css:基础公共样式 commo ...

vue3小兔鲜商城项目学习笔记+资料分享05

登录模块

路由与组件

结构布局-CV

表单布局-CV

消息提示组件和复选框组件

组件外观

XtxCheckBox 组件使用

Message 组件使用

函数调用 - 推荐

vue3小兔鲜商城项目学习笔记+资料分享05相关推荐

最新文章

热门文章

vue3小兔鲜商城项目学习笔记+资料分享05

登录模块

路由与组件

结构布局-CV

表单布局-CV

消息提示组件 和 复选框组件

组件外观

XtxCheckBox 组件使用

Message 组件使用

函数调用 - 推荐 insertAdIfNeeded();

vue3小兔鲜商城项目学习笔记+资料分享05相关推荐

最新文章

热门文章

消息提示组件和复选框组件

函数调用 - 推荐