使用vant框架的部分总结

1.在vue中安装vant

npm i vant -S

2.手动按需引入

一些组件的使用

1.toast

为什么没有全局引入并使用toast组件也能使用成功？？？疑惑

2.van-field

添加自定义图标

3.van-form

需求：将以下错误提示信息通过toast来进行提示

效果图如下

进阶用法

1使用 postcss-pxtorem 将 px 转为 rem

1.1 安装依赖：

yarn add -D postcss-pxtorem
-D 是 --save-dev 的简写
npm install postcss-pxtorem -D

1.2 然后在项目根目录中创建 postcss.config.js 文件：

module.exports = {
	  plugins: {
	    'autoprefixer': {
	      browsers: ['Android >= 4.0', 'iOS >= 8']
	    },
	    'postcss-pxtorem': {
	      rootValue: 37.5,
	      propList: ['*']
	    }
	  }
}

成功引入重启项目

2.使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

2.1 安装依赖：

yarn add amfe-flexible
npm i amfe-flexible

2.2 然后在 main.js 中加载执行该模块：

import 'amfe-flexible'

最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。

🧞‍♀️未完待续~~