首页手记【学习打卡】第8天【2022版】Vue3...

【学习打卡】第8天【2022版】Vue3 系统入门与项目实战第八讲

标签：

JavaScript Vue.js

课程名称： 2022持续升级 Vue3 从入门到实战掌握完整知识体系

课程章节： “京东到家”项目首页开发

主讲老师： Dell

课程内容：

今天学习的内容包括：

1rem就是html中font-size的大小，如果没有自定义（默认），那么以谷歌浏览器为例，是16px。如果设置了html的font-size，就等于定义了1rem的大小。

normalize.css作用类似于reset.css，消除不同浏览器的样式差异；base.scss作用是设置好px和rem的关系

BEM命名规则：block__element–modifier

课程收获：

8.2 心得：

1.安装使用Eslint和vetur插件
2…editorconfig编辑器默认配置、babel自带的语法转换插件、package.json依赖包与配置、package-lock.json版本锁定、README.md项目描述文本
3.main.js入口文件、App.vue全局组件
4.assets静态文件、components公共组件、router路由、store Vuex数据存储、views页面

8.3 心得：

项目开始时 css 的重置：

import “normalize.css”（版本号不固定）

import “./style/base.scss”

1rem就是html中font-size的大小，如果没有自定义（默认），那么以谷歌浏览器为例，是16px。如果设置了html的font-size，就等于定义了1rem的大小。

| px | rem |
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |

npm install normalize.css --save
Normalize.css只是一个很小的css文件，但它在磨人的HTML元素样式上提供了跨浏览器的高度一致性

8.4 心得：

将其他css文件都导入到index.scss中集中导入入口文件，而不是逐个导入

BEM的命名规矩：模块名 + 元素名 + 修饰器名。

设计标注可用Sketch Measure/蓝湖完成

设置文字大小小于12px：

&_title{

	font-size:.2rem;

	transform:scale(.5,.5); 

transform-origin: center top; 

}

阿里矢量图库提供了cdn，生成代码粘贴可以不用把字体图标存储到本地

将其他css文件都导入到index.scss中集中导入入口文件，而不是逐个导入

@import './base.scss'; 

@import './iconfont.css';

8.5 心得：

vue3允许中有多个根元素

scss 文件改进

创建：

$content-fontColor: #333

@mixin ellipsis{ 

	overflow: hidden; 

	white-space: nowrap; 

	text-overflow: ellipsis; 

}

引入：

<style lang="scss">

@import "./style/viriables.scss"; 

@import "./style/mixins.scss";

使用：

.wrapper{

position: absolute; 

top: θ;

left: θ; 

right: θ; 

bottom:.5rem; 

padding: 0 .18rem;

color: $content-fontColor; 

.banner{

	position: relative; 

	width: 100%;

	padding:.16rem 24rem .16rem 0 ; 

	box-sizing: border-box;

	font-size: .16rem; 

@include ellipsis; 

}

@mixin 定义一个样式块，可用@include引入这个样式块。

8.6 心得：

防止网速不好导致页面图片加载缓慢，图片下面的内容出现抖动现象：

.banner {
height: 0;
overflow: hidden;
padding-bottom: (图片高度/图片宽度)%
}

原理：网速慢的情况下图片没有下载完，但这个css能先把图片的位置预留，这样就不会出现图片加载时把后面的内容顶下去导致内容跳动的情况

防止图片加载抖动可以用HTML的原生方法，不需要css-hack；使用 width，height和intrinsicsize设置原始分辨率：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。

8.7 心得：

实现图标列表布局：

<div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/超市.png">

            <p class="icons__item__desc">超市便利</p>

          </div>



          <div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/菜市场.png">

            <p class="icons__item__desc">菜市场</p>

          </div>



          <div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/水果店.png">

            <p class="icons__item__desc">水果店</p>

          </div>



          <div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/鲜花.png">

            <p class="icons__item__desc">鲜花绿植</p>

          </div>



          <div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/医药健康.png">

            <p class="icons__item__desc">医药健康</p>

          </div>



          <div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/家居.png">

            <p class="icons__item__desc">家居时尚</p>

          </div>



          <div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/蛋糕.png">

            <p class="icons__item__desc">蛋糕烘焙</p>

          </div>



          <div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/签到.png">

            <p class="icons__item__desc">签到</p>

          </div>



          <div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/大牌免运.png">

            <p class="icons__item__desc">大牌免运</p>

          </div>



          <div class="icons__item">

            <img class="icons__item__img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.dell-lee.com/imgs/vue3/红包.png">

            <p class="icons__item__desc">红包套餐</p>

          </div>

父元素有padding值时，有分割线的话用margin值撑开

8.9 心得：

格式化的时候总是把单引号变成双引号，还多加分号和逗号，解决办法如下：

在根目录下创建.prettierrc.json文件，内容

{
   "singleQuote": true,
   "semi": false,
   "trailingComma": "none"
}

8.10 心得：

icon 字符转义：

<div class="iconfont" v-html="item.icon"  />

setup(){

const dockerList=[

｛icon： ＇＆＃xe6f3;＇, text： ＇首页＇｝， 

｛icon： ＇＆＃xe7e5；＇， text： ＇购物车＇｝， 

｛icon： ＇＆＃xe61e；＇， text： ＇订单＇｝， 

｛icon： ＇＆＃xe660；＇， text：＇我的＇｝， 

];

return { dockerList } 

}

使用字符串模板修改动态传参的值：

<img class="icons_item_img" :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=" http://www.de1l-lee.com/imgs/vue3/${item.imgName}.png />

8.11 心得：

scoped 组件样式仅用于自己组件内不会造成污染

<style lang="scss" scdped>

@import '../../style/viriables.scss'; .

.wrapper {

	background:red; 

}

name:vue调试扩展程序方便招到节点

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

ToRAmen

学生

手记
篇

粉丝

10

获赞与收藏

4

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 299680 2115

后端通用面试教程

41个小节 28753 323

网络编程入门教程

20个小节 11953 226

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

【学习打卡】第8天 【2022版】Vue3 系统入门与项目实战第八讲