学习内容

• 什么是 vant
• 使用 vant
• REM 适配

什么是 vant

轻量、可靠的移动端 Vue 组件库

• 特性
  • 60+ 高质量组件
  • 95% 单元测试覆盖率
  • 完善的中英文文档和示例
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持 TS
  • 支持 SSR
  • 现代浏览器以及 Android 4.0+, iOS 7+
• 官方地址：https://youzan.github.io/vant/#/zh-CN/intro

使用 vant

• 安装

npm i vant -S

• 导入：

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

Vue.use(Vant);

以上做法是完整导入，在项目开发阶段使用，配置方便节省时间，将来上线的时候可以使用按需导入。

REM 适配

注意：如果项目中没有生成postcss.conifg.js，请手动创建即可。

• Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具
  • postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
  • lib-flexible 用于设置 rem 基准值
• 安装

  	# 后处理器 开发阶段使用
  	npm i postcss-pxtorem -D
  	# 修改rem基准值的js插件   需要在打包后需要使用
  	npm i amfe-flexible -S
  

然后，下面提供了一份基本的 postcss 配置（postcss.config.js），可以在此配置的基础上根据项目需求进行修改

module.exports = {
  plugins: {
    'autoprefixer': {},
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*']
+    }
  }
}

最后，入口文件main.js导入 amfe-flexible

import 'amfe-flexible'

• 注意：
  • rootValue 是转换px的基准值，参考设备iPhone6，设备宽度375px。
  • flexible 在iPhone6设备设置的 html--->font-size 也为37.5px 。
  • 但是 设计稿 尺寸750px 大小，所以在设计稿量取的尺寸使用时候需要 除以2 。