使用插件对移动端的页面进行适配

1、第一

　　引入lib-flexible . 

　　安装lib-flexible：　　npm i lib-flexible --save

　　在项目的入口main.js文件中引入lib-flexible: 

import 'lib-flexible'

一定不要忘了是在main.js中

2、第二

　　使用postcss-px2rem自动将css中的px转换成rem（真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊）

　　安装postcss-px2rem ：　　npm install postcss-px2rem --save-dev

3. 移除public中index.html中关于viewport的meta标签

vue.config.js中加入配置项 (如果没有vue.config.js就直接根目录(package.json同级)新建一个)

module.exports = {

    css: {

        loaderOptions: {

               css: {

                       // options here will be passed to css-loader

               },

         postcss: {

                    // options here will be passed to postcss-loader

                    plugins: [require('postcss-px2rem')({

                              remUnit: 37.5,//设计稿的 十分之一

                              "exclude": /node_modules/i

                    })]

               }

          }

      }

移动的布局 媒体查询     媒体查询   会有一个设计稿(750  600 375)

html,body{   font-size:100px}   其他页面元素中  如果是10px  就写 0.rem

需要在项目中测试一下 配置是否完成 在Home.vue中 随便写几个div  给样式 (配置的设计稿是375)

<template>
  <div class="home">
    首页
    <div class="item1">
      1
    </div>
      <div class="item2">
      2
    </div>
  </div>
</template>
<style scoped>
  .item1{
    width: 375px;
    height: 40px;
    background-color: green;
  }
  .item2{
    width: 200px;
    height: 20px;
    background-color:yellow;
  }
</style>

然后重新启动服务 审查页面元素

以上是针对vue/cli的版本低于5.0

当前vue/cli5.0的版本用以下步骤

1:安装插件
# 根据网页的宽度，设置 html 的 font-size
npm  i amfe-flexible
2:main.js引入
import 'amfe-flexible'
3:继续安装px的转化插件
npm i postcss postcss-pxtorem@5.1.1 -D
4:根目录下创建 postcss.config.js 来对 对 postcss-pxtorem 进行配置
写入配置
module.exports = {
    plugins: {
      'postcss-pxtorem': {
        // rootValue：转换的根元素的基准值
        // 正常情况下按照你的设计稿来
        // 750 宽的设计稿，750 / 10 = 75
        // 375 宽的设计稿，375 / 10 = 37.5
        rootValue: 37.5,
        // 需要转换的 CSS 属性，* 就是所有的属性都要转换
        propList: ['*'],
      },
    },
 }
5:重启服务 会发现px转成了rem

Vant的使用

打开Vant的官网文档

第一步安装

npm i vant -S

第二步引入 在main.js中引入Vant 代码如下

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

第三步使用Vant中swiper(轮播图) 

第四步 把代码引入到Home.vue中

<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
  </div>
</template>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>

第五步 重新npm run  serve  查看效果  首页中就有的轮播图