Skip to content

Latest commit

 

History

History
271 lines (223 loc) · 4.45 KB

03. 首页.md

File metadata and controls

271 lines (223 loc) · 4.45 KB
Raw

蘑菇街首页

搭建本地 MockJS

为什么需要 Mock ？

  • 前端尽早进行接口联调
  • 提升开发效率

Mock 的几种方式

  • Rap 编写接口文档，Mock 数据，后端维护
  • Swagger 注解生成接口文档，Mock 数据，后端维护
  • 本地的 MockJs ，前端维护

搭建本地的 MockJS

  • 搭建本地的 MockJS，模拟后端接口
  • 接口采用 Restful 风格

axios 封装 request.js

const service = axios.create({
  baseURL: '/api',
  headers: {'Content-Type': 'application/json;charset=UTF-8'},
  withCredentials: false
});

service.interceptors.request.use(
  config => {
    if(store.state.token) {
      config.headers['token'] = store.state.token;
    }
    return config
  }
)

service.interceptors.response.use(
  response => {
    const {data} = response
    if(data.status == 200) {
      Toast.clear();
      return data
    } else {
      // error
      Toast(data.msg);
      return Promise.reject(new Error(data.msg || 'Error'));
    }
  }
)

响应式布局

  • 方案：rem、vw、rem+vw
  • 实现 REM 方案

REM

  • 安装 lib-flexible -S
  • 安装 postcss-plugin-px2rem -D
plugins: [
    require('postcss-plugin-px2rem')({
        rootValue: 75,
        exclude: /(node_module)/,
        minPixelValue: 3,
        selectorBlackList:['van']
    })
    // require('postcss-px-to-viewport')({
    // 	viewportWidth: 750,
    // 	exclude: /(node_module)/,
    // 	unitPrecision: 3,
        // selectorBlackList:['van']
    // })
]

首页设计稿构思

  • 抽出可复用组件
  • 多色图标 svgicon
  • 纯 CSS 做轮播图
  • 页面布局

OOCSS 范畴：

  • 结构 -》组件

架构之 Elements 层扩展

  1. 公共样式
  2. 页面样式

扩展基础样式，如 html、p、img 等

html {
  background-color: $background-color-primary;
  color: $color-text-primary;
}

img {
  width: 100%;
  vertical-align: middle;
}

架构之 ACSS 层扩展

  • 公共、原子化 CSS
  • 复用性极高的样式属性
[circle] {
  border-radius: 100rem;
}

@for $i from 13 through 50 {
  [fz#{$i * 2}] {
    font-size: #{$i * 2}px;
  }
}

$direction: (l left, r right, t top, b bottom);
@for $i from 1 through 30 {
  @each $type in m, p, v, h, a{

    @if $type == m {
      @each $d in $direction{
        [m#{nth($d, 1)}#{$i}] {
          margin-#{nth($d, 2)}: #{$i}px;
        }
      }
    }

    @else if $type == p {
      @each $d in $direction{
        [p#{nth($d, 1)}#{$i}] {
          padding-#{nth($d, 2)}: #{$i}px;
        }
      }
    }

    @else if $type == h {
      [ph#{$i}] {
        padding-left: #{$i}px;
        padding-right: #{$i}px;
      }

      [mh#{$i}] {
        margin-left: #{$i}px;
        margin-right: #{$i}px;
      }
    }

    @else if $type == v {
      [pv#{$i}] {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
      }
    }

    @else {
      [pa#{$i}] {
        padding: #{$i}px;
      }
    }
  }
}

架构之 Components 层扩展

  1. 公共组件
  2. 结构相似
<template>
  <div
    class="c-box-skin"
    :class="type? 'c-box-skin--'+type: ''">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'CBoxSkin',
  props: {
    type: {
      validator: function (value) {
        return ['top', 'bottom'].indexOf(value) !== -1
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@include b(c-box-skin) {
  background-color: $background-color-secondary;
  @include m(top) {
    border-top: $border-base;
  }
  @include m(bottom) {
    border-bottom: $border-base;
  }
}
</style>

多色图标 SvgIcon

SvgIcon 优势：

  • svg 支持多色图标
  • svg 可以控制图标不同部分，加入动画
  • svg 是矢量图形，图标锐利，体积更小

制作 svgIcon 的平台 IconPark

纯 CSS 实现轮播图

<template>
  <div class="c-swipe">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'CSwipe',
  props: {
    list: {
      type: Object,
      default: []
    }
  }
}
</script>
<style lang="scss" scoped>
@include b(c-swipe) {
  white-space: nowrap;
  overflow: auto;
  scroll-snap-type: x mandatory;
}
</style>


<template>
  <div class="c-swipe-item">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'CSwipeItem'
}
</script>
<style lang="scss" scoped>
@include b(c-swipe-item) {
  display: inline-block;
  @include dimensions(100%, auto);
  scroll-snap-align: center;
}
</style>