vue2+vant移动端适配起步

vue2+vant移动端起步

1.初始化工程

	vue create xxxx
1

2.下载需要的所有第三方依赖包

​ vant、vuex、axios…

vue2中vant组件的下载：

	npm i vant@latest-v2 -S
1

​ 官网：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart

3.引入准备好的reset.css和flexible.js，实现样式初始化和适配问题

​ 该文件在博客资源中https://download.csdn.net/download/guhanfengdu/86511418

在main.js中引入

	import '@/assets/flexible.js'

    import  '@/assets/reset.css'
1
2
3

4.vant最好的方式，vant自动按需引入

# 安装插件
npm i babel-plugin-import -D
1
2

​ import { Button } from ‘vant’;

5.要引入webpack的postcss插件，用于将px转化为rem

npm i postcss-pxtorem@5.1.1 -d
1

6.如果你不想引入flexible.js，希望直接使用插件，如果使用了flexible.js此步骤跳过

	npm i -S amfe-flexible
1

​ 在main入口文件中引入

	 import 'amfe-flexible/index.js'
1

6.根目录下新建postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {},
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 37.5, // 设计稿宽度的1/10
            "propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
}
1
2
3
4
5
6
7
8
9
10

例如：iphone6

​ 一倍图是375px，并不是每个移动端都是375的尺寸，根字体大小也是不同的，是需要计算出来的（由flexible.js或者插件完成）

iPhone6 的font-size为37.5px，要做出适配，所有子元素都是需要参照根字体元素做出适配就需要转换成rem（postcss-pxtorem完成）。

值得注意的是

​ 依旧以iPhone678为例，我们得到的图纸是750尺寸的，将rootValue设置为75，这样我们就可以做到1:1开发项目，但是当我们使用第三方库的时候（vant），如果不将rootValue设置为37.5,vant组件库的大小会受到影响，原因是由于vant并没有做rem适配，所以建议：依旧使用37.5开发，将设计图数据/2进行样式编写，可实现1:1复刻设计图。