第一天

设置路径别名

在webpack.base.conf.js文件下大概34行的位置

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
      'common': resolve('src/common'),
    }
  },

下次直接在main.js中这样引用就ok

import 'styles/reset.css'
import 'styles/border.css'
import 'styles/iconfont.css'

设置css变量

首先你需要下载两个相关的模块，去我nodeJs中找模块，

然后编写varibles.styl 这类结尾的文件比如：

$bgColor = #00bcd4
$darkTextColor = #333
$headerHeight = .86rem

然后在vue中可以这样引用

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header
    display: flex
    line-height: $headerHeight
    background: $bgColor
    color: #fff
    .header-left
       .64rem
      float: left
      .back-icon
        text-align: center
        font-size: .4rem
    .header-input
      flex: 1
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      padding-left: .2rem
      background: #fff
      border-radius: .1rem
      color: #ccc
    .header-right
      min- 1.04rem
      padding: 0 .1rem
      float: right
      text-align: center
      color: #fff
      .arrow-icon
        margin-left: -.04rem
        font-size: .24rem
</style>

阿里矢量图标库

去官网打包下载之后，只需要这几个文件 iconfont.eot iconfont.svg iconfont.ttf iconfont.woff 和 iconfont.css

这样引用：

每个标签都用类iconfont 包裹，然后里面内容是十六进制的数字，官方上有。

<div class="iconfont back-icon">&#xe624;</div>

轮播插件 vue-awesome-swiper 的使用

gitHub地址：https://github.com/surmon-china/vue-awesome-swiper

上面有例子，下面列出来我项目用的demo

<template>
  <div class="wrapper">
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="item of list" :key="item.id">
      <img class="swiper-img" :src="item.imgUrl" />
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: { /* 自定义一些参数 */
        pagination: '.swiper-pagination', /* pagination指向.swiper-pagination会出现页码 */
        loop: true /* 轮询 */
      },
      list: [{
        id: '1001',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1806/ad/23a79e8bde5f5002.jpg_890x330_40841a65.jpg'
      }, {
        id: '1002',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1806/ad/23a79e8bde5f5002.jpg_890x330_40841a65.jpg'
      }]
    }
  }

}
</script>

<style lang="stylus" scoped>
  /*穿透，就是说这个插件的样式是这个模块自带的css样式控制的，而vue带scoped属性只能修改本页面的css，但是我们想修改插件自带的css样式*/
    /*我们可以这样写，意思是穿透 wrapper这个类下面的swiper-pagination-bullet-active 从而改变css样式*/
  .wrapper >>> .swiper-pagination-bullet-active
    background: red
  .wrapper
    overflow: hidden
     100%
    height: 0
    padding-bottom: 31.25%
    background: #eee
    .swiper-img
       100%
</style>