1、移动端响应式

1.1 响应式尺寸

• 移动端屏幕的尺寸是特别多的，所以不可能像pc端那样，将尺寸固定死。移动端开发的时候，尺寸是不建议写死单位的，如 固定值为多少px，因为多少px无论在哪种设备上面都是一样的效果，所以大小尺寸不同的设备给用户的界面效果是不一样的！
• 希望有一种单位可以实现屏幕尺寸的一个动态变化！

1.2、解决方案

• rem单位是一种解决方案。

  • 视口问题

    <!-- 移动端，响应式开发必须具备的！ -->
    <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    

  • rem思路

    • rem是一个相对单位！ 1rem 的大小等于 html标签的font-size大小！ 默认html标签的font-size是16px. 也就是说 1rem 默认等于 16px

    • 默认

      html{ font-size:16px /*默认*/ }
      .box{width:10rem;    /* 160px */height:10rem;
      }
      

    • 修改

      html{ font-size:20px /*默认*/ }
      .box{width:10rem;    /* 200px */height:10rem;
      }
      

    • 如果说我们网页里面的所有单位都使用了rem去实现，也就是说所有的尺寸大小都依赖于html标签的font-size大小， 我们可以通过js去实现控制 在不同屏幕尺寸下面去修改html标签的font-size大小！这样就可以实现不同屏幕下所有页面内容的大小动态变化。

  • 如何实现rem的变化！

    • UI设计师在设计移动端的，宽度是以 375位尺寸（iPhoneX），高度是根据内容决定的。设计师新建的画布是 750px的。因为设计师设计移动端的时候一般都是2倍图！

  • 默认rem是设计为多少呢？

    • 1rem = 100px 呢？？？
    • 目的： 为了换算容易！

  • 实现

    function setRem() {// iphone6var defaultRem = 100;     // 基准默认rem大小   使用100的原因是想 计算方便！var designWith = 750;    //  基准屏幕设计图尺寸大小// 当前设备信息var screenWidth = window.innerWidth;    // 获取屏幕宽度！//  推出当前设备的rem尺寸大小是多少px//  基准默认rem大小/基准屏幕设计图尺寸大小  =  当前的rem大小/当前屏幕尺寸大小var curRem = window.innerWidth * (defaultRem / designWith);document.getElementsByTagName("html")[0].style = "font-size:" + curRem + "px"
    }
    setRem();
    // 屏幕尺寸发生变化的时候！
    window.onresize = setRem
    

2、项目搭建

2.1、初始化项目

vue init webpack meituan
...
cd meituan   // 进入目录
cnpm i			 // 安装依赖
npm run dev  // 启动项目 

2.2、处理rem

• 将rem.js 放在 static目录下面的js目录里面，然后在index.html里面引入

   <script src="./static/js/rem.js"></script>
  

• 修改index.html页面里面的 meta viewport

  <meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  

2.3、搭建路由

• 删除helloWorld.vue 文件

• 创建pages目录，创建页面文件

• 路由配置

  // router.js 文件
  import Vue from 'vue'
  import Router from 'vue-router'Vue.use(Router)// 导入页面组件
  import index from "../pages/index"
  import user from "../pages/user"
  import tuangou from "../pages/tuangou"
  import pay from "../pages/pay"
  import notfound from "../pages/notfound"var router =  new Router({routes: [{path: '/',meta:{ title:"美团首页" },component: index},{path: '/user',meta: { title: "用户中心" },component: user},{path: '/tuangou/:id',    // 动态路由！meta: { title: "团购详情" },component: tuangou},{path: '/pay',meta: { title: "支付页面" },component: pay},{path: '*',meta: { title: "404页面" },component: notfound}]
  })// 路由拦截
  router.beforeEach(function(to,from,next){// 设计标题document.title = to.meta.title;next();
  })// 暴露路由！
  export default router;

2.4、处理静态图片

• 将img文件夹放在static目录下面。

2.5、编写css样式

• 方式1： 在vue文件里面的style标签里面去书写

• 方式2： 在assets目录下面创建css文件夹，然后在里面创建对应的css文件，然后在.vue的组件里面去引入它

  /* 引入css */
  @import url(../assets/css/index.css);
  

3、轮播插件

• vue-awesome-swiper

• 官网地址：https://www.swiper.com.cn/

• Vue版本文档地址：https://github.com/surmon-china/vue-awesome-swiper

• 使用

  • 安装依赖

    npm install swiper vue-awesome-swiper --save
    

  • 再次启动项目

    npm run dev
    

  • 在你需要使用轮播的页面做如下操作

    • 引入轮播组件和其样式

      import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
      import 'swiper/css/swiper.css'
      

    • 给组件添加一些配置信息

      export default {...components: {Swiper,SwiperSlide},directives: {swiper: directive}
      }
      

    • 复制结构，在需要使用轮播图的地方，复制如下结构

      <swiper ref="mySwiper" :options="swiperOptions"><swiper-slide>内容1</swiper-slide><swiper-slide>内容2</swiper-slide><swiper-slide>内容3</swiper-slide><swiper-slide>内容4</swiper-slide><div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      

    • 在组件data中添加上配置选项

      data(){return{swiperOptions: {  // 轮播的配置信息pagination: {el: '.swiper-pagination'},// Some Swiper option/callback...}}
      }
      

4、favicon制作

• 打开 https://tool.lu/favicon/

• 选择图片，选择生成16*16的 favicon

• 将生成的favicon.ico文件放在static目录

• 在index.html中加入下面代码

  <link rel="shortcut icon" href="./static/favicon.ico">