1.移动端规范

转换单位rem，设置媒体查询

为什么使用rem？

移动端最麻烦的是，不同分辨率适配！

 

 

iPhone6 为标准 750*1334 手机端的4px等于电脑端的1px 2倍关系 @2

ihone6s 1242*2208 手机端9px=1px   3倍关系@3

一倍关系就是pc端的

手机是视网膜屏

2.创建项目

cmd->vue create 项目名 目前选择2.0版本

3.vue.comfig.js的配置

module.exports = {
    devServer: {
        open: true,//自启动
        port: '5200',//端口号
        host: '0.0.0.0'//域名
    }
}

4.配置文件夹

views 配置组件

router 配置路由 index.js 配置主入口文件夹

5.配置公共css，设置媒体查询

*{
    margin: 0;
    padding: 0
}
ul,li{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333
}
a:hover{
    color: #f55
}
input,button{
    border: 0;
    outline: 0 //轮廓线
}

/* 设置基础字体大小 */
html,body{
    font-size: 10px !important;
}

/* 基准 375px 屏幕 i6/7/8*/

/* 1rem=10px */
@media screen and (min-width:375px){
    html,body{
        font-size: 10px !important;
    }
}


/* 基准 414px 屏幕 i6s/7s/8s*/

@media screen and (min-width:414px){
    html,body{
        /* 10*414/375=11.04 */
        font-size: 11.04px !important;
    }
}


/* 基准 768px 屏幕 ipad */

@media screen and (min-width:768px){
    html,body{
        /* 10*768/375=20.48 */
        font-size: 20.48px !important;
    }
}

 5.配置底部公共组件 tabbr

1. 点击li设置路由跳转 <router-link to='/跳转位置'></router-link>
2. 移动端 手触摸的最小区域是44px  2.2rem

3. 路由跳转字体图标选中 

   <i v-if="$route.path.includes('/要判断的路由')" class=""><i> 如果跳转，出现

   <i v-else  class=""></i> 没有跳转，出现这个

4. .router-link-active{} 选中组件设置样式

5. router-view放在app.vue中

 6.路由元信息 配置mate字段

判断是否显示

tabbr是公共样式，但是在详情页等等一些页面还是不想让它显示的就要设制mate字段。组件进行判断，如果当前路由下mate为ture，就让其组件显示

  routes: [{
        path: "/home",
        component: () => import("../views/home/home.vue"),
        meta: { //配置路由元信息
            erge: true //可以根据条件的真假，来显示或者隐藏tabbar这个组件
        }
    }

  <!-- $route.meta.showTabBar meta是路由配置的元信息-->
    <tabbar v-if="$route.meta.erge"></tabbar>

7. ly-tab移动端的可触摸滑动具有回弹效果的可复用Vue组件npm ly-tab 

下载   打开cmd

npm i ly-tab -S

vue项目主入口 main.js引入

import LyTab from 'ly-tab'
Vue.use(LyTab)

使用

<ly-tab
    v-model="selectedId"
    :items="items"
    :options="options"
    @chage="lytab">
</ly-tab>

data () {
    return {
      selectedId: 0,
      items: [
        {label: '首页'},
        {label: '推荐'},
        {label: 'Android'},
        {label: '前端'},
        {label: '后端'},
        {label: 'iOS'},
        {label: '产品'},
        {label: '人工智能'},
        {label: '设计'}
      ],
      options: {
        activeColor: '#1d98bd'//选中的颜色
        // 可在这里指定labelKey为你数据里文字对应的字段名
      },
    }
  }

需求：怎么点击label的时候下面跳转到相应的组件？ 

1设置一个内置组件

<component :is="homeComponent"></component>

2.在data中，定义组件一开始为homeIndex

homeComponent:"homeIndex"//让组件一开始为homeIndex

3. 这个组件中有一个chage事件 可以获取组件的值和索引，依照索引值判断组件出现的是谁

lytab(item,index){
    //console.log(item)值
    //console.log(index)索引
    if(index==0){
        this.homeComponent:"homeIndex"
    }
}

8.编程式导航

点击分类，跳转路由，就需要编程式导航

//点击事件
toCatagroy(){
    this.$router.push('/要跳转的路由')
}

ok！复习一下这个知识点

• this.$router.push(path)：添加新路由
• （2）this.$router.replace(path)：用新路由替换当前路由
• （3）this.$router.back()：返回上一个路由； 原页面表单中的内容会丢失;参数空，后退；为0，刷新；为1，前进
• （4）this.$router.go(-1)：返回上一个记录路由；原页面表单中的内容会保留; 参数-1，后退+刷新；为1，前进

9.轮播图  mint-ui swipe

下载 cmd 

npm install vue-cli -g 

引入main.js

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

使用 没有样式不显示

<mt-swipe :auto="4000" @change="bgchange">
  <mt-swipe-item>图片1</mt-swipe-item>
  <mt-swipe-item>图片2</mt-swipe-item>
  <mt-swipe-item>图片3</mt-swipe-item>
</mt-swipe>

 需求：当轮播图切换的时候,背景颜色跟着改变!

change事件
轮播图切换时会触发change事件，参数为切入轮播图的索引

bgchange(index){
    //背景颜色的变量名 //颜色数组
    this.bacolor=this.bgcolor[index]
}

10.文字轮播 

    //动态的绑定动画
<ul :class="{animate:flag}" ref="list"></ul>

<style>
    .animate{
        transition:all 0.5s linear;
    }
</style>

原理：上去一个删除一个加到末尾 

data(){
    return{
        timer:null，
        flag:false,
    }
}
methos:{
    scrollNews(){
        //获取dom元素  原理：上去一个删除一个加到末尾
        let domul=this.$refs.list;
        domul.style.top="-4px"//一个li的高度
        this.flag=!this.flag//设置一个开关，只有上去的时候执行动画
        setTimeout(()=>{
            this.newList.push(this.newList[0])
            this.newList.shift()
            domul.style.top="0"
            this.flag=!this.flag//下来的时候动画不显示
        },500)
    }
}
mounted(){
    this.timer=setInterval(this.scrollNews,3000) 
    //为什么定义timer？因为组件销毁的时候定时器要清除，但是函数无法直接获取，所以需要定义一个data
}
destroyed(){
    clearInterval(this.timer)
}

为什么定义timer？

因为组件销毁的时候定时器要清除，但是函数无法直接获取，所以需要定义一个data 

 设置过渡效果的时候要注意！

只有在上去的时候添加动画，下来的时候直接切换，不需要动画，所以需要一个开关

一定要清除定时器！！！

11.  秒杀 对秒杀的总结

12.ul太长，超出屏幕最大宽度，怎么可以使其左右滚动？

在最外面的盒子上设置 overflow-y:auto;

多文本出现省略号 对省略号的总结

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.25.26.27.28.29.30