05-项目实战-页面骨架开发

5-1 组件拆分（上）

// .eslintrc.js
'semi':['error','always'] // eslint强制语句有分号
'indent': 0 // 取消indent设置

<!--index.html-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/reset.css"/>

/* eslint-disable no-new */ // eslint跳过no-new检查

5-2 组件拆分（中）

"stylus": "0.52.4",
"stylus-loader": "^2.5.0",

<template>
  <div id="app">
    <v-header></v-header>
  </div>
</template>

<script>
  import header from './components/header/header';

  export default {
    components: {
      'v-header': header
    }
  };
</script>

<style>
</style>

<template>
  <div class="header">
    I'm header
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>

5-3 组件拆分（下）

flex布局

<div class="tab">
  <div class="tab-item">商品</div>
  <div class="tab-item">评论</div>
  <div class="tab-item">商家</div>
</div>

<style lang="stylus" rel="stylesheet/stylus">
  #app
    .tab
      display flex
      width 100%
      height 40px
      line-height 40px
      .tab-item
        flex 1
        text-align center
</style>

5-4 Vue-router(上)

/* package.json */
"dependencies": {
  "vue-router": "^0.7.13"
},

npm install

<div class="tab">
  <div class="tab-item">
    <a v-link="{path:'/goods'}">商品</a>
  </div>
  <div class="tab-item">
    <a v-link="{path:'/ratings'}">评论</a>
  </div>
  <div class="tab-item">
    <a v-link="{path:'/seller'}">商家</a>
  </div>
</div>
<router-view></router-view>

/* main.js */
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

import goods from 'components/goods/goods'
import ratings from 'components/ratings/ratings'
import seller from 'components/seller/seller'

Vue.use(VueRouter)
let app = Vue.extend(App)

let router = new VueRouter()
router.map({
  '/goods': {
    component: goods
  },
  '/ratings': {
    component: ratings
  },
  '/seller': {
    component: seller
  }
})
router.start(app, '#app')

5-5 Vue-router(下)

/* main.js */
router.go('/goods') // 路由直接跳到/goods页

<style lang="stylus" rel="stylesheet/stylus">
  .tab
    .tab-item
      & > a // &表示父级元素
        display block // 填满父级元素
                text-decoration: none;// 去除文本a标签下划线
        font-size 14px
        color rgb(77,85,93)
        &.active // 父级元素有active类,则应用一下CSS
          color rgb(240, 20, 20)
</style>

CSS书写规范：布局、宽高等写在前，字体颜色重绘不影响布局的写在后

/* main.js */
let router = new VueRouter({
  linkActiveClass: 'active'
})

5-6 1像素border实现

手机的1像素为物理2像素，所以在电脑上是1像素，则在手机上为2像素

手机访问电脑服务项目地址：手机电脑同时连接内网WiFi，电脑查看IP，将IP的服务地址发送到手机端即可访问

/* mixin.styl */
border-1px($color)
  position relative
  &:after
    display block
    position absolute
    left 0
    bottom 0
    width 100%
    border-top 1px solid $color
    content ' '

/* base.styl */
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform scaleY(0.7)
      transform scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform scaleY(0.5)
      transform scaleY(0.5)

/* index.styl */
@import "./base.styl"
@import "./icon.styl"
@import "./mixin.styl"

/* main.js */
import 'common/stylus/index.styl'

<div class="tab border-1px">
</div>
<style lang="stylus" rel="stylesheet/stylus">
  @import "common/stylus/mixin.styl"
  .tab
    // border-bottom 1px solid rgba(7, 17, 27, 0.1)
    border-1px(rgba(7, 17, 27, 0.1))
</style>