【项目记录/vue移动端】仿京东到家首页

1-1初始化

1）vue create jingdong
勾选sass语法、哈希路由
删除git相关
2）npm run serve启动

1-2目录简介

插件

Vetur高亮显示、Eslint校验语法

入口文件：main.js

1.创建一个APP实例
2.使用router
3.使用store（属vuex，状态管理库）
4.挂在实例到DOM节点

createApp(App).use(router).use(store).mount("#app");

Vuex 是专门为 Vue.js 设计的状态管理库
多个组件共享状态时，单向数据流（状态-视图-操作-状态…）的简洁性很容易被破坏：多个视图依赖于同一状态；来自不同视图的行为需要变更同一状态

静态文件assets

功能组件components

页面级组件views

1-3基础样式集成normalize.css

是CSS reset的替代方案
不同的浏览器默认样式不同，比如：超链接下划线，有些浏览器有，有些浏览器无；一些蓝色，一些黑色
而normalize.css功能是对几乎所有的默认样式进行重置，让所有的浏览器上对未定义的样式浏览效果达到一致

原理

为各分辨率范围的移动端设置固定的属性值
例：font-size

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

rem

1rem=1*html fonsize；rem相对根元素，即html的字体大小

适用范围

与元素尺寸有关的css
例：
字体相关属性font-size
盒子相关属性width、height、margin、padding、border
行高属性line-height

html{
font-size:10px
 .item{
   width:rem
 }
}

321px <= device-width <= 375px，font-size:11px        --->  .item的width：34px
376px <= device-width <= 414px，font-size:12px        --->  .item的width：37.4px
415px <= device-width <= 639px，font-size:15px        --->  .item的width：40.8px
640px <= device-width <= 719px，font-size:20px        --->  .item的width：51px
720px <= device-width <= 749px，font-size:22.5px      --->  .item的width：76.5px
750px <= device-width <= 799px，font-size:23.5px      --->  .item的width：79.8999999px
800px <= device-width         ，font-size:25px        --->  .item的width：85px

1-4flex + iconfont 完成首页 docker 样式编写

BEM命名规则

block-name__element-name–modifier-name;
即:模块名_元素名–修饰器名

流式布局（又名百分比布局：固定高度、宽度自适应）

PC端，固定版心大小，让所有分辨率的电脑的版心大小都相等
移动端：屏幕小不宜固定版心大小；用流式布局

案例

定高、宽度自适应

  display: flex;
  width: 100%;
  height: 0.49rem;

flex: 1;完全等比宽度

等价于

flex-grow：1;//等分空间
flex-shrink：1;//空间不足时，等比例缩小
flex-basis：0%;//父元素计算剩余空间时，忽略子元素的宽度

transform: scale()设置小于12PX字体

原因：
浏览器为了提升用户的浏览体验,设置字体最小为12px,如果继续缩小字体,样式就不会生效,此时需使用transform: scale(numX, numY)属性

注意：
1）缩小的是盒子大小,而不是缩小字体大小；故只对块级元素有效
2）transform-origin（变形原点）默认值为：50% 50%；即为中心点
3）numX, numY表示缩小倍数
4）盒子所占空间并未缩小；若想让后面的盒子紧跟,可设置margin-right：负数

2-2 用Scss 组织地址区域布局

混入

定义可在整个样式表中重复使用的样式
1)定义混入

@mixin ellipsis {
  // 溢出隐藏
  overflow: hidden;
  // 文本不换行
  white-space: nowrap;
  // 以省略号表示被修剪的文本
  text-overflow: ellipsis;
}

2）使用混入

 @include ellipsis;

变量

用于存储一些信息，便于重复使用
1）定义变量与值

$content-fontcolor: #333;

2）使用变量

color: $content-fontcolor;  

嵌套

嵌套规则：一套样式嵌套进另一套样式；内层样式将外层样式的选择器作为父选择器

选择器权重

id权重>class权重>标签权重

.position {
//相当于.position .position__icon ，其权重高于.position
  .position__icon {}
}

父选择器标识符&

.docker {
//相当于.docker__item
 &__item {
 }
 //相当于.docker__item--active
  &--active {
  }
}

2-3 利用CSS技巧实现搜索及 banner 区域布局

防抖动

防止页面加载图片抖动，即图片加载出来之前下面内容挤上来
通过设置padding预留图片空间；值：图片高度/图片宽度*100%

.banner {
  height: 0;
  overflow: hidden; 
  padding-bottom: 25.4%;
  }
}

2-4 使用 flex布局实现图标列表布局

flex-wrap属性

如果一条轴线排不下，如何换行
1)nowrap（默认）：不换行
2)wrap：换行，第一行在上方
3)wrap-reverse：换行，第一行在下方

.icons {
  display: flex;
  flex-wrap: wrap;
}

流式布局（百分比布局） 宽度自适应

.icons {
  &__item {
    // 五张图，宽度设为父盒子的1/5
    width: 20%;
    }
}

2-6 首页组件的合理拆分

依据：静态、动态

2-7 使用v-for, v-html 指令精简页面代码

<div
  v-for="(item, index) in dockerList"
  :class="{ docker__item: true, 'docker__item--active': index === 0 }"
  class="docker__item"
  :key="item.icon"
>
</div>
  export default {
  name: "Docker",
  setup() {
    const dockerList = [
      { icon: "&#xe6f3;", text: "首页" },
      { icon: "&#xe7e5;", text: "购物车" },
      { icon: "&#xe61e;", text: "订单" },
      { icon: "&#xe660;", text: "我的" },
    ];
    return { dockerList };
  },
};

列表渲染v-for

属性绑定 :class

对象语法-动态切换多个class

:class="{ docker__item: true, 'docker__item--active': index === 0 }

在对象中传入多属性，根据属性值（true/false）决定是/否携带该属性；
属性值可传变量,设置index为0的盒子携带docker__item–active属性

:key

为了高效更新虚拟DOM
要唯一

v-html

按普通 HTML 插入内容

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

2-8 CSS 作用域约束以及 Vue 开发者工具的安装使用

scoped

限定CSS作用范围是当前组件的元素,而无法作用到父组件

<style lang="scss" scoped>