jingdong

移动端项目：京东到家

线上演示

Project setup

npm install
npm run serve
npm run build
npm run lint

项目页面

• 注册
• 登录
• 首页
• 购物车页
• 商家详情页
• 商家详情页-遮罩
• 确认订单
• 选择收货地址
• 确认提交弹框
• 我的订单
• 个人中心
• 地址列表
• 新建地址
• 修改地址

stylesheets

• 1rem == 1 * html 元素的 font-size
• BEM 命名: block__element--modifier 语义化的css编码

npm packages

npm i -S normalize.css

js code snippet

➜  code-for-project git:(cwy-branch) ✗ node
Welcome to Node.js v12.16.2.
// Returns a string consisting of the elements of the object repeated count times.
> 'js'.repeat(5)
'jsjsjsjsjs'

参考

• Flex 布局教程：语法篇

• flex container

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

• flex item

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size），设置元素的初始长度

• https://www.iconfont.cn/
• scss 中 & 符号的作用

// scss
  .position {
    // ...
    &__icon {
      // ...
    }
    .position__notice {
      // ...
    }
  }

// scss 编译后生成的 css
.position {
  // ...
}
.position__icon {
  // ...
}
.position .position__notice {
  // ...
}

• css hack 避免图片下面内容的抖动

.banner {
  height: 0;
  overflow: hidden;
  // padding 的值为百分数时，是相对于容器的宽度 width 来计算的
  padding-bottom: 25.4%; // 这里 25.4% 是通过容器的 height/width 计算得到的
  &__img {
    width: 100%;
  }
}

• 组件的 name 属性会显示在 Vue.js devtools 这个浏览器插件中，方便调试

• Trigger KeyDown event in older browsers with JS

• KeyboardEvent值（keyCodes，metaKey等）

  setTimeout(() => {
    key = "f12"
    keyCode = "123"
    window.dispatchEvent(new KeyboardEvent('keydown', {
        key, keyCode,
    }));
  }, 3000)

• www.fastmock.site

• async route

  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }

• watchEffect 它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数

• transform, transform-origin

• rem 布局的情况下，实现项目对不同设备的展示适配

    <script>
        var width = document.documentElement.clientWidth || document.body.clientWidth;
        var ratio = width / 375;
        var fontSize = 100 * ratio;
        document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
    </script>