前端 Vue.js

Vue2.5仿去哪儿app 实战项目笔记

移动端适配 项目目录结构 轮播图 样式穿透 px与rem

Posted by wantingtr on August 19, 2018

Vue2.5仿去哪儿app 实战项目笔记

移动端适配 项目目录结构 轮播图 样式穿透 px与rem

 

参考页面：去哪儿网
效果演示：
qunar 项目展示：
仿去哪儿网-Vue.js移动webApp

 

移动端的适配

  1. 引入reset.css

    在进行页面开发的时候，需对css进行一些初始化的设置与重设，通过reset.css把浏览器提供的默认样式覆盖掉,统一不同浏览器的默认样式。

  2. 安装、使用stylus
    Stylus 是一个CSS的预处理框架，可以创建健壮的、动态的、富有表现力的CSS。 Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。
    安装：
    npm install stylus
    使用：
    <style lang="stylus" scoped>

  3. scoped的样式穿透
    vue组件中的style标签标有scoped属性时,表明style里的css样式只适用于当前组件元素.
    <style lang="stylus" scoped>

  4. 使用varibles.styl
    对于频繁使用的样式，可在varibles.styl中定义，如$bgColor = #00bcd4
    在其他css文件中，直接使用样式名即可生效。
    @import '~styles/varibles.styl'
    color: $dark-text-color

  5. 关于CSS中，px、em、rem的区别 本项目中使用rem，因为rem更能适配多种移动设备。
    在reset.css中，通过设置html：{fontsize：50px}。所以1rem = html font-size =50px。
    对于一个大小为86px的图片，因为原始图片都为二倍尺寸，故应为43px即0.86rem。这样，就使得一个原始像素1px=0.01rem

     px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
     em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
     rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

 

项目目录结构

路由配置

在router目录下的index.js中，对每一个页面进行配置 import home from '@/pages/home/home.vue'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      ...
    }
  ]
})

main.js配置

在main.js中，应该对项目所引进的所有依赖包进行import 例如：

import Vue from 'vue'
import App from './App'
import fastClick from 'fastClick'
import router from './router'
import 'styles/reset.css'
import 'styles/border.css'
import 'styles/iconfont.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

组件化开发

在/src/pages下，包括了项目中的所有页面。 对于Vue来说，可使用组件化开发，即将页面分为若干个小的，可复用的组件。 即每一个页面都包括了一个组件目录，一个整体vue页面。

在每一个组件页面中，进行组件的声明

<script>
export default {
  name: 'homeHeader'
}
</script>

在整体页面中，import所有组件

<script>
import homeHeader from './components/header.vue'
import homeSwiper from './components/swiper.vue'
import homeIcons from './components/icons.vue'

export default {
  name: 'home',
  components: {
    homeHeader,
    homeSwiper,
    homeIcons
  }
}
</script>

并且使用组件名称，进行代码编写

<template lang="html">
  <div class="">
    <home-header></home-header>
    <home-swiper></home-swiper>
    <home-icons></home-icons>
  </div>
</template>

组件中的data必须是函数

每个组件都是互相独立的，如果它们共用一个对象，在更改一个组件数据的时候，会影响其它组件。
如果是函数的话，每个组件都有都是又自己独立的数据，互相不会影响。

data() {
  return {
    ...
  }
}

 

轮播图

  1. 使用Vue-Awesome-Swiper插件
    npm install vue-awesome-swiper@2.6.7 --save
  2. 在swiper组件中，定义
<div class="wrapper">
  <!--最外层的div标签，是为了防止页面加载时间形成闪烁-->
  <swiper :options="swiperOption">

    <swiper-slide v-for="item of swiperList" :key='item.id'>
      <img class="swiper-image" :src="item.imgUrl">
    </swiper-slide>

    <div class="swiper-pagination"  slot="pagination"></div>
    <!--pagination为轮播图下方的小圆点，并且所有的slot都需要在data中定义 -->
  </swiper>
</div>

并在该组件的data中，定义

data () {
  return {
    swiperOption: {
      pagination: '.swiper-pagination',
      loop: true
      //循环
    },
    swiperList: [{
      id: '0001',
      imgUrl: 'http://img1.qunarzz.com/piao/fusion/1806/de/df09fa61aed2d502.jpg_750x200_67472739.jpg'
    }, {
      id: '0002',
      imgUrl: 'http://img1.qunarzz.com/piao/fusion/1808/5e/514ce60160e62602.jpg_750x200_9b0074e2.jpg'
    }, {
      id: '0003',
      imgUrl: 'http://img1.qunarzz.com/piao/fusion/1807/66/e5a5cec881702f02.jpg_750x200_67bb5691.jpg'
    }]
  }
}

轮播图下的小圆点

默认样式的滚动小圆点是蓝色的，若想将其改为白色，第一反应是将其通过css改变样式。

.swiper-pagination-bullet-active:{
  color: #fff;
}

经过运行后发现颜色没有改变，仍然为蓝色。 这是因为在css中，声明了scoped，使得该组件的css只能修饰当前组件样式，不会对其他组件产生任何的影响。而swiper-pagination实际是在swiper组件里的。 所以如果直接声明其样式，是不会起效果的。

样式穿透

当在组件中额外引用第三方组件时，若需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。

.wrapper >>> .swiper-pagination-bullet-active
  background: #fff

高度自适应

在进行页面加载时，通常文字比图片先加载出来。一开始，图片没有加载时高度是0，加载完才会把它撑开，所以会产生图片加载完成前后文字的位置改变，用户会有明显的抖动感。

解决方法：
在图片的最外层加一个div标签，并且使其高度自适应。

.wrapper
  width: 100%
  height:0
  overflow: hidden
  padding-bottom: 26.5%
  .swiper-image
    width:100%
FRIENDS