【学习打卡】第8天【2022版】Vue3 系统入门与项目实战第八讲-原创手记-慕课网

课程名称： 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" src="http://www.dell-lee.com/imgs/vue3/超市.png">

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

          </div>



          <div class="icons__item">

            <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/菜市场.png">

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

          </div>



          <div class="icons__item">

            <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/水果店.png">

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

          </div>



          <div class="icons__item">

            <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/鲜花.png">

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

          </div>



          <div class="icons__item">

            <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/医药健康.png">

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

          </div>



          <div class="icons__item">

            <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/家居.png">

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

          </div>



          <div class="icons__item">

            <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/蛋糕.png">

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

          </div>



          <div class="icons__item">

            <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/签到.png">

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

          </div>



          <div class="icons__item">

            <img class="icons__item__img" src="http://www.dell-lee.com/imgs/vue3/大牌免运.png">

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

          </div>



          <div class="icons__item">

            <img class="icons__item__img" src="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" :src=" 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调试扩展程序方便招到节点

图片描述