昔洛 的个人博客 昔洛 的个人博客

Bug不空,誓不成佛

目录
Vant 移动端组件库
/      

Vant 移动端组件库

学习内容

  • 什么是 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单位,推荐使用以下两个工具
  • 安装
    	# 后处理器 开发阶段使用
    	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
内事不懂问百度,外事不懂问谷歌~