一.开始时的一些步骤
二.具体步骤
1.准备一些字体图标,用到阿里巴巴的矢量图库: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
打开网站登录,在资源管理中找到我的项目,新建项目,将素材里面的svg导入到本地项目中去,去除颜色并提交.
2.引入vant组件库
https://vant-contrib.gitee.io/vant/#/zh-CN/
# Vue 2 项目,安装 Vant 2:npm i vant -S
安装插件后需要重启一下vscode,重新加载.
3.复习移动端适配,rem是相对于html标签的字体大小而言的.
4.安装移动端 REM 适配
Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
npm i -S amfe-flexible
main.js中引入:import 'amfe-flexible'
npm uninstall postcss-pxtorem
npm install postcss-pxtorem@5.1.1
https://cli.vuejs.org/zh/guide/css.html#postcss
使用 postcss-pxtorem 将 px 转为 rem